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. Doe

Answer 1

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" />

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

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

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

Answer 5

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 6

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.