CODEWITHSUNDEEP
htmlcssipadmobile-safari
Adam
Adam

Reputation: 803

Thin gray/black lines on web page viewed with iPad

We're finding the the iPad is displaying thin grey/black lines on our site. It seems to be some form of scaling-artefact on mobile Safari. I've provided two snippets of pages below, with the contrast tweaked to highlight the issue, unfortunately because the iPad display is quite good, these lines are quite noticeable.

They seem to come and go as the page is zoomed, and look like divs/images are being scaled with rounding issues at the edges, causing the edge pixel to be blended with black.

Has anyone found a workaround or fix for this?

Thanks

Line showing with no image

Line on edge of scaled PNG

Upvotes: 13

Views: 37868

Answers (12)

Sahil Tayade
Sahil Tayade

Reputation: 19

If you are using a transparent div with position relative, then margin-bottom: -1px will not work. In this case, you can use @Leonard's answer:

border-bottom: 1px transparent solid ;
margin-bottom: -1px ; /* for Mobile Safari dark line artifact */

This comes in handy when using parallax scrolling and position relative divs containing text.

Upvotes: 1

Jared Henderson
Jared Henderson

Reputation: 1319

I tried a bunch of fixes to remove these grey-ish tiny lines when mobile-safari was zoomed in, and the simplest and most flexible fix I found was here:

http://www.oddodesign.com/2010/css-tip-how-to-prevent-div-seam-lines-from-appearing-in-apples-mobile-safari/

Essentially, you add

margin-bottom:-1px;

To elements that are getting phantom line borders added.

Upvotes: 12

Devin Rhode
Devin Rhode

Reputation: 25287

We had a white line at the bottom of a full page iframe in iPad, so we just set the height to 100.5% and this solved the problem.

Upvotes: 0

eric
eric

Reputation: 1

I also had the same problem in my home page and none of these solutions worked for me. In my particular case it was the background showing up in between the div layers as Johnny up top was saying. I ended up wrapping the existing layers with another div and made it the same background color as the two existing layers and the lines were not visible anymore. If nothing else works give it a try.

Upvotes: 0

qwertyisms
qwertyisms

Reputation: 21

In my particular case, the offending div would not be fixed with margin:-1px or border tricks. I had a div with:

height: 0px; 
padding-bottom: 57.2%;

-- this is a trick to create an element that retains its proportions at different widths, because the padding top/bottom derives the percentage from the width. In my case, I was able to fix it by changing this to:

height: 1px; 
padding-bottom: 57.2%;

IMPORTANT: it is worth noting that I found a refresh of the offending page, even with changed styles, did not remove the line, even when I hid the body*. To remove the lines each time they came back, I had to reboot the device.

  • ( body {display:none} that is, not tampering with evidence)

Upvotes: 0

Lorenz Haase
Lorenz Haase

Reputation: 364

I had a greyish line (iPad only) at the bottom of my header bar and fixed it with:

position:relative;
z-index:2;

directly added to the header container. perhaps this could also help out someone.

Upvotes: 0

Steve
Steve

Reputation: 1

I was having this same issue with 1px lines showing up in desktop browsers and on the iPad and iPhone.

Here was my old css:

html,body {

background:url(images/bg.jpg);
height:100%;
    background-color:#E8E8E8;
text-align:center;
text-decoration:none;
width:auto;

}

My new css:

html,body {

background:url(images/bg.jpg);
height:100%;
text-align:center;
text-decoration:none;
width:auto;

}

Removing "background-color:" has fixed this problem with all of my sites.

Upvotes: 0

Ian Venskus
Ian Venskus

Reputation: 942

Since this is triggered by background color just use a 1px gif bg image of the same background color and repeat it. If you use modernizr you can write something like this:

.touch .class-of-td { background: transparent url(../_img/services/1px-bgfix.gif) repeat; }

This also works for elements that are displayed table-cell to get vertical-align: middle.

Upvotes: 0

Leonard
Leonard

Reputation: 668

If the answers above don't work for you as they didn't for me there is an extra thing you may wish to try which did solve me issue:

border-bottom: 1px transparent solid ;
margin-bottom: -1px ; /* for Mobile Safari dark line artifact */

Adding a border a transparent border to the bottom seemed to help, my reasoning is that it still tries to render a border and even though it's transparent it forces it to re-render those pixels. That however is pure conjecture but the solution seems to work!

Upvotes: 1

johnny
johnny

Reputation: 1

If the <div> is not the same color as the background and is white, this is very viewable.
Basically, the background-color in format needs to be the same color as the <div> sitting on top of it or you will get a line.
An easy work around is to change the background-color to match the <div> or make a tile that will cover the areas in the background where the <div> sit.

Upvotes: 0

Luis Rivera
Luis Rivera

Reputation: 517

Adding this to the block above the line worked for me very well.

margin-top:-1px; /* this overlap the blamed ghost line */
padding-top:1px; /* this gave me my pixel back =) */

if its happening to you in too many blocks you should create a class instead.

Upvotes: 0

Marcus
Marcus

Reputation: 5143

The iOS zoom seems to take some data from the next line in the image (maybe rounding error on the interpolation?). I did some tests, and it seems to be a consistent problem. I reported this as a bug to Apple.

Adding 1 line of background-colored pixels to the image (or 1px padding if you will) seems to do the trick. Not ideal but works.

Possibly same problem as Rendering borders bug in Safari mobile on Safari Mobile in general.

Upvotes: 4

Related Questions