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.