Thin gray/black lines on web page viewed with iPad

Question

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

Backer

Looks similar to #3903606, but there's no suggestion on that question about a solution either. – Conatus

Answer 1

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.

Vlada

terrible "solution" for pixel-precise layouts – Nanice

the best solution for gradient background on mobile too – Mesne

Answer 2

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.

Parvenu

Answer 3

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!

Sura

Answer 4

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.

Prewitt

Answer 5

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.

Lavonia

Answer 6

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.

Haddington

Answer 7

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.

Nahuatlan

Answer 8

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.

Vivanvivarium

Answer 9

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.

Eleazar

Answer 10

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)

Adriaadriaens

Answer 11

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.

Strode

Answer 12

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.

Santee