Home/ Questions/Q 5942395
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T16:14:49+00:00

Here at this line after clouds which will be only visible in iPad or

  • 0

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}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    • 0