CODEWITHSUNDEEP
iphonehtmlcssipad
Jitendra Vyas
Jitendra Vyas

Reputation: 152637

A 1 pixel gap only coming on iPad but fine on Safari and Chrome

Here at this line after clouds which will be only visible in iPad or iPhone. Any idea how to solve it?

It's fine in all other desktop browsers.

enter image description here

CSS

#banner-inner { height: 270px;     margin: 0 auto;    position: relative;    width: 954px;}

.cloud-bottom { position: absolute; background: url(images/clouds_dark.png) repeat-x 0 bottom ; z-index: 1; width:100%;height:111px;bottom:0}

.cloud-top { position: absolute; background: url(images/clouds_light.png) repeat-x 0 bottom ; z-index: 4;width:100%;height:111px;bottom:0}

Upvotes: 24

Views: 14345

Answers (7)

Chris Kelly
Chris Kelly

Reputation: 21

I also solved the iOS sub pixel gap issue (on a full screen site) by using overflow-x: hidden; to stop side ways scrolling & viewpoint scale to stop pitch zooming. I also had holder divs set at width: 101%; and all the elements/image divs inside set to float: left;. This means the sub pixel gaps are all on the left hand site but pushed out of view by the holder div set at 101% width.

Upvotes: 1

Lea Hayes
Lea Hayes

Reputation: 64196

I have found that this tends to occur when background images are up-scaled to match the resolution of the device. I suspect that this occurs due to a small amount of colour bleeding along the outer edges of your image which can usually be resolved by providing an additional version of your background for higher pixel density displays (i.e. retina in this case).

The following trick works great for me:

.your-thing {
    background-repeat: no-repeat;
    background-image: url('img/your-background.png');
    background-size: 400px; /* width of "your-background.png" */
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2) {
    .your-thing {
        /* override with version which is exactly 2x larger */
        background-image: url('img/[email protected]');
    }
}

The above solution worked perfectly in my case.

Upvotes: 0

Laurent Etiemble
Laurent Etiemble

Reputation: 27889

This seems to be a bug of the WebKit rendering engine on the iPad, when the page scale factor is less than 1.0. If you keep the page scale factor above 1.0, then the pixel gap does not show up. This can be done with a meta tag:

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

I also found a simple page that demonstrate a similar issue (a rendering glitch on iPad only):

In the past, there have been a number of bugs reported for rounding issues in the WebKit engine:

Upvotes: 27

Allan K.
Allan K.

Reputation: 49

If disabling zoom is not wanted, and if the margin trick does not work (it probably works with background colors, but I could not get it to work with background images), here is another solution:

Make all background images 1 or 2 px bigger (cut them so they contain a 1 px duplicate of the graphics above/below), and use css background-size and background-position to ensure that the extra (unwanted) pixel is not shown - it will then only be used if the browser needs that extra pixel to cover the rendering gap.

Tested to fix the rendering bug on Android's 2.3's default browser (will test on iPhone & iPad on monday), plus zooming errors in Chrome on PC.

Upvotes: 1

Yoann
Yoann

Reputation: 5077

Try to set the the height of the #banner in PX not in EM And the hieght of cloud is 112px en 113px not 111px for both.

Upvotes: 0

Nick Weaver
Nick Weaver

Reputation: 47241

Funny beahviour, when transparancy is turned off. Even as jpg it does show this artifact. Looks like a bug in the webkit rendering engine.

enter image description here

Upvotes: -1

Ibu
Ibu

Reputation: 43810

Try this

#wrapper {
     margin: -2px auto;
... rest of your css....

}

may be there is a small resolution problem also so try this also

#wrapper {
    background-color: #fff;
... rest of your css....

}

one of them has to work :)

UPDATE:

I think i got it,

remove #wrapper background-color;

remove #banner-switcher background:

Upvotes: 0

Related Questions