CODEWITHSUNDEEP
iphonecssiframesafariartifact
Vinod Tonangi
Vinod Tonangi

Reputation: 43

iFrame showing a grey line in mobile safari only

I designed a simple corporate site, and have spent more time trying to debug this rendering issue than I have getting stuff to work correctly in PHP!

I have an iframe. On all other browsers (even Safari on the desktop) it renders correctly, but on Safari mobile there is a thin grey line on the border of the iFrame - but only at certain zoom levels. I read other similar posts that had to do with 2 divs coming in contact with each other, but there iFrame is not encased in a div.

Relevant CSS:

iframe.noBorder {
  border: none;
  border:0;
}

Actual iFrame embed code:

<iframe class="noBorder1" src="header.html" width=980 height="160" frameborder="0" border="0" scrolling="no" ></iframe>

Like I said, it's not in a div or anything.

You can see the problem here or check out the image here.

Upvotes: 3

Views: 3875

Answers (2)

JPguitar
JPguitar

Reputation: 11

overflow: hidden; solves the problem!

Upvotes: 1

amelvin
amelvin

Reputation: 9061

I tried this on a few PC browsers with no problem - so I guess you have found a mobile glitch.

Could you set the border-color attribute of the iframe to the same greeny-grey color as the containing element - or to transparent and see if that fixes it?

Upvotes: 1

Related Questions