iPad's Safari have problems on rendering jpg as background-image?

Question

This is my code :

HTML

<div class="sfondo-interne-8601">
    <div style="height:1200px; width:900px;">
        Test
    </div>
</div>

CSS

.sfondo-interne-8601
{
    background-image:url('http://www.deviantart.com/download/247331565/moonlit_tears_by_lifesequencebreak-d439699.png') !important;   
    background-repeat:no-repeat;
    background-position:center top;
} 

Well, try to create a page an test it on iPad : it works well (the image is png).

Now, try to change the image with a jpg (I already choose one for you here ). You will notice that the new image will be resized (not sure about which rules) and centered in the center/top of the whole html document.

Why? And how can I fix it? Is there any limitation on ipad?

JUST noticed that if I use .jpg slower than 1150px (as height) it works as well. A Safari's bug?

Answer 1

On iOS, jpeg images of over 2MP get subsampled (look under "resource limits"), effectively altering the dimensions of the image.

I'd speculate this would not manifest so obviously with CSS background-size set to contain or cover (it would still happen, but since the aspect ration would not be affected and the background sizing algorithm would still be run)

If you want for the subsampled background image to keep rendering at its original dimensions, you can add background-size: 1920px 1200px : before and after .