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.

Answer 1

Im claiming 3 things:

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

---

1. As you can see here the div is still 200x200 pixels
2. The image is resized to be 200x200 pixels Even if it's 400x400 pixels. See here
3. 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