Black borders of ios 7 browser around div elements

Question

I get a strange error in browsers on iOS7 where black lines appear around div elements. But when you approach the element, these lines disappear. Does anyone have an idea of ​​what causes this strange error? There were no lines in iOS6. This happens at this URL: http://www.tristanfrencken.com/

Hope someone can help me with this!

Answer 1

Unusually, it seems to work when the item is fixed and has a background color, but only in iOS7, and not in the background image. I would call it a bug in the browser, but as a workaround now you can use a solid white image, tiled, as the background of the header.

Answer 2

We had the same problem in our web application where container div elements with background color and fixed positioning will get black borders with different scaling values ​​in iOS 7.

Our first solution included converting background colors to base64 URLs that worked well enough but weren't flexible enough.

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

Answer 3

This seems to be a bug in iOS7, as well as in the latest Safari on OSX Maverick. Overlapping elements with a background color seem to “thicken” their outlines, causing this strange behavior. I am desperate for a solution to this.

I started a new topic about it here iOS7 / Mavericks Safari weird element border behavior

Answer 4

This happened to me, and it’s related to the meta tag that allows me to scale

IOS Safari seems to have a problem resizing and creating this artifact

Using a meta tag to disable scaling solves my problem (user-scalable = no)

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

Answer 5

This seems to be a problem directly in webkit ( https://bugs.webkit.org/show_bug.cgi?id=124541 ).

Answer 6

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

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