ios 7 browser-kit black borders around div elements

Question

I'm getting a strange bug in the browsers in iOS7 where black lines are appearing around div elements. But when you zoom in to an element, these lines are disappearing. Does anyone have an idea what causes this strange bug? In iOS6 there weren't any lines appearing. It's happening on this url: http://www.tristanfrencken.com/

Hopefully someone could help me with this!

Answer 1

Bizarrely, this seems to be triggered when an element is fixed AND has a background color, but only in IOS7 and not if it has a background image. I'd chalk it up as a bug in the browser, but as a workaround for now you could use a solid white image, tiled, as your header background.

Answer 2

We hade the same problem in our web app where container div-elements with background color and fixed positioning would get black borders at various zoom values in iOS 7.

Our first solution involved converting background colors to base64 urls which worked fairly well but wasn't flexible enough.

Instead we got rid of the black borders by applying border-radius: 1px; to the container elements which removed all black borders. The value is low enough to not be visible.