Background image blurry when scaling on iPad and iPhone

Question

I'm creating a web app where I allow users to zoom certain 100x100px background images.

When they double tap the image, I scale the image to twice its size (-webkit-transform: scale( 2 )).

When the transition is done, I swap the 100x100px image with a larger 200x200px image. For some reason, the image is very blurry.

So I tried to use an img tag instead of a div tag to show my images. Here the image isn't blurry at all. Why is this?

I NEED to use background images to circumvent the memory limit on the iPad and iPhone (if I use img tags I will hit a memory wall).

Can anyone help me? Thank you so much.

Stupid question, but are you sure the swap with the larger image happens? — Bart, Aug 07 '11 at 21:04
Yes positive since I do see a change when the swap occurs. However, still very blurry and unreadable. — John Johnson, Aug 07 '11 at 21:18
I've created a test case (has to be viewed in a webkit browser): http://www.webdevout.net/test?01x — John Johnson, Aug 08 '11 at 09:21
There was a problem with the image provider: [link](http://www.webdevout.net/test?0b) — John Johnson, Aug 08 '11 at 09:52
Might it be some "smartness" of the browser? Your big image is 400x400, which gets "sized down" by the 200x200 values in your div and then subsequently scaled up to be 400x400 again. If the browser optimized the initial scaling down, then when you scale up again your image would become blurry. (Not sure if I'm entirely clear, but then again I do need coffee ;) ) — Bart, Aug 08 '11 at 10:00
It might be because of the browser. I just don't see how I can fix it - do you have any suggestions? — John Johnson, Aug 08 '11 at 10:05
Perhaps this post might be of help: [How to force re-render after a webkit 3D transform in safari](http://stackoverflow.com/q/4641522/488657). It relates to a similar issue. — Bart, Aug 08 '11 at 11:13

score 2 · Answer 1 · answered Aug 10 '11 at 14:51

Im claiming 3 things:

Scaling a div stretches the pixels and not adding more.
background-size: contain; Ensures you that your background-image is fully showen
The div never change size.

As you can see here the div is still 200x200 pixels
The image is resized to be 200x200 pixels Even if it's 400x400 pixels. See here
Almost proved in 1. the font is still sharp but javascript thinks the width and height is 200x200 pixels.

Okay so for your fix:

There are several ways.

You can change width and height instead of scaling. This isn't any pretty, or at least you are very lucky if this animation doesn't lack it's way throw (on iOS).

Something else could be scaling and detection webkitTranstionEnd

$('div').bind("webkitTransitionEnd", function() {
    $(this).css({
        "-webkit-transform": "scale(1)",
        "width": "400px",
        "height": "400px"
    });
     $(this).unbind("webkitTransitionEnd");
});

Remember to unbind the webkitTransitionEnd event. Else its doubling the function call.

But what happend it's animation back. So we have to keep the transtion in a class so we can add and remove it when we want:

div {
   -moz-transition-duration: 0ms;
}
div.transition {
    -moz-transition-duration: 200ms;
}

And then add the class when we have to animate:

setTimeout(function() {
    $('div').addClass("transition");
    $('div').css({
        backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
        webkitTransform: 'scale( 2 )',
        mozTransform: 'scale( 2 )'
    });
}, 3000);

And remove it again in webkitTransitionEnd

$(this).removeClass('transition');
$(this).css({
   "-webkit-transform": "scale(1)",
   "width": "400px",
   "height": "400px"

}); $(this).unbind("webkitTransitionEnd");

What??! It dosn't add / remove the class in time?! What happen.

Sometimes the browser needs a little while to make sure the class is added. Therefore you need to wrap the setting of css in a setTimeout(function(){...}, 0);

setTimeout(function() {
    $('div').addClass("transition");
    setTimeout(function(){
        $('div').css({
            backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
            webkitTransform: 'scale( 2 )',
            mozTransform: 'scale( 2 )'
        });
    }, 0);
}, 3000);

Also when we remove the class:

$(this).removeClass('transition');
setTimeout(function(){
    $(this).css({
        "-webkit-transform": "scale(1)",
        "width": "400px",
        "height": "400px"
    });
     $(this).unbind("webkitTransitionEnd");
}, 0);

So long, now the problem is that it's scaling up and get blurred and after the scale it gets super sharp.

What we can do about it I dont know, but hope it helps you some where!

Andreas

Background image blurry when scaling on iPad and iPhone

1 Answers1