CODEWITHSUNDEEP
jqueryhtmlioscssjquery-masonry
Kneep
Kneep

Reputation: 71

ios 7 browser-kit black borders around div elements

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!

Upvotes: 7

Views: 3892

Answers (6)

play
play

Reputation: 121

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

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

Upvotes: 0

HektorW
HektorW

Reputation: 31

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.

Upvotes: 3

kuba
kuba

Reputation: 1009

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

Upvotes: 0

Antonio Brandao
Antonio Brandao

Reputation: 218

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

Upvotes: 0

riccardolardi
riccardolardi

Reputation: 1741

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

Upvotes: 0

Greg
Greg

Reputation: 10352

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.

Upvotes: 4

Related Questions