Open Radar

 
Summary: 
Some sites display a thin line at the edge of elements which does not display in any other browser or in Safari on the desktop. This affects Mobile Safari (I have tested it on Safari on iOS 3.1.3 (build 7E18) and Safari on IPhone Simulator.app version 4.0 (211.1) -- iPhone with iOS 4.0 (8A293) and iPad (3.2 - 7W367a) and iPhone 4 (4.0 - 8A293). The behavior is the same, so I presume that this is a long-standing rendering bug.

The elements (in this case, the body and a div centered on top of it) have the same background-color, with no border set at all in the CSS.  I tried setting a border color in the CSS, and that had no effect on the bug.

Steps to Reproduce:
In Safari (running on an iOS device or on the iPhone Simulator), go to http://molleurlaw.com/ or http://habitatmooring.com/ and observe the thin vertical lines displayed to either side of the main content in the header. Zoom in to see it better.  Now try the same two sites on a desktop browser and you will not see the artifacts.

Expected Results:
One would expect this to lead to rendering the div overlaying the body with no border and no way to see the edge of the div.

Actual Results:
In fact on an iOS device, there is a thin line displayed at the edge of the two elements. Note that it occurs at many, but not all zoom levels. At some zoom levels it disappears when panning, but reappears when zooming to a different level.

Regression:
It seems to occur in all versions of Mobile Safari I have access to, both on an iPod touch 2nd gen running iOS 3.1.3 and on the simulator running any permutation of device/version.

Notes:
I have attached several screen captures showing the problem.