I spent nearly all of yesterday battling - what turned out to be - a mobile Safari rendering issue. Both screenshots are of the same thing: two absolutely positioned div’s at the same location, with one div rotated 180 degrees on its Y-axis. The desktop version correctly positions them next to each other (appearing as a solid box), however the iPad erroneously introduces a 1px seam (or gap) in between the two.
The first few hours were spent deconstructing my code to make sure it wasn’t user error, before building a stripped-down prototype so I could test the issue in isolation.
Then came hours of trying to override the behavior, starting with translateX(), setting negative margins, bumping the left positioning up by one, etc, all in attempt to nudge the pieces closer together by force. These all got rid of the seam, but since the two div’s each have 50% of a background graphic (that combined make a single image) they introduced new, undesirable artifacts.
In the end, it became obvious this was a rendering bug caused by mobile Safari’s viewport zoom handling and the fix was easy: disable zooming with <meta name=”viewport” content=”initial-scale=1, maximum-scale=1”>
Hopefully this post saves someone else a very frustrating day.
