Geek Answers Handbook

Background image is blurry when zooming on iPad and iPhone

I am creating a web application where I allow users to zoom in on 100x100px background images.

When they double-tap the image, I scale the image up to two times (-webkit-transform: scale (2)).

When the transition is done, I change the image 100x100px with a large size of 200x200 pixels. For some reason, the image is very blurry.

So I tried using the img tag instead of the div tag to show my images. Here the image is not completely blurry. Why is this?

I NEED to use background images to get around the memory limit on the iPad and iPhone (if I use img tags, I click on the memory wall).

Can anyone help me? Thank you very much.

+8
html ipad
source share
1 answer

I affirm 3 things:

  • Scaling div stretches the pixels and doesn't add anymore.
  • background-size: contain; Ensures that your background image is fully displayed.
  • div never resizes.
  • As you can see here the div is still 200x200 pixels
  • Image size is 200x200 pixels, even if it is 400x400 pixels. See here
  • Almost proven in 1. the font is still sharp, but javascript considers the width and height to be 200x200 pixels.

Good for your fix:

There are several ways.

You can change the width and height instead of scaling. This is not beautiful, or at least you are very lucky if this animation is not without the ability to quit (on iOS).

Something else could be scaling and detecting webkitTranstionEnd

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

Remember to cancel the webkitTransitionEnd event. Once again, doubling the function call.

But what happened is the animation back. Therefore, we must save the transtion in the class so that we can add and remove it whenever we want:

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

Then add the class when we need 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 delete it again in webkitTransitionEnd

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

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

What??! He does not add / remove a class on time ?! What will happen.

Sometimes the browser takes some time to make sure the class is added. So you need to wrap the css setting in 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 far, the problem is that it expands and erodes, and after scaling it becomes very sharp.

What we can do about it, I don’t know, but I hope this helps you somewhere!

Andreas

+2
source share

More articles:


All Articles