ios 7 browser-kit black borders around div element

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

This seems to be a bug in iOS7 as well as in the newest Safari on OSX Maverick. Overlapping elements with background color seem to 'thicken' their outlines causing this strange behaviour. I am desperately looking for a solution to this.

I started a new topic about it here iOS7 / Mavericks Safari strange element border behaviour

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.

Answer 3

It seems that this is problem directly in webkit ( https://bugs.webkit.org/show_bug.cgi?id=124541 ).

Answer 4

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 5

Use "background-image" property with the same gradient values:

background-image: -webkit-linear-gradient(top, #your_color, #your_color);

Answer 6

This was happening to me and it had to do with the meta tag allowing zoom

Apparently iOS Safari has a problem with resizing things and creates that artifact

Applying a meta tag to disable zoom solved my problem (user-scalable = no)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />