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

Question

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.

Answer 1

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/your-background@2x.png');
    }
}

The above solution worked perfectly in my case.