Background image quality on pinch/zoom - help!

[Jay]

Hi Matteo,

Thank you for the iScroll plugin. It's wicked.

Just wondering whether you'll be able to help me out with my issue regarding the background image when zoom in. Somehow when I zoom on using the pinch/zoom feature the background loses quality. I've applied -webkit-transform: translate3d(0px, 0px, 0px) on the div container as some people suggested from my research but no avail. The background image is twice the size of the container which thought may solve the problem but no luck still.

Any thoughts from you will be much appreciated? Many thanks!

[Gene Loparco]

Jay,

This one is pretty easy.  If your original background image is the same size as the container being zoomed, when you zoom it, it will result in blurriness.  The only way to retain a sharp image would be to create an image that is n times as big as the iscroll container, making n equal to the maximum zoom size.  That way, in its zoom=1 state, the image is scaled down (no loss of quality) and in its zoom=n state, the image is at its original size (also no loss of quality).

Hope that helps,

-Gene

[Jay]

Hi Gene,

Thanks for your reply. That's what I thought originally. I have already done that - making the background image twice or even thrice larger than the container being zoomed but still no luck unfortunately. Have you tried it yourself? If so, do you mind sending me a link and so, I can check it out. I may be just missing something out.

Many thanks!

-Jay

" The background image is twice the size of the container which thought may solve the problem but no luck still. "

[Gene Loparco]

Hi Jay, sorry, I don't have any code for you (the code I'm working on is under NDA).  In my case, I actually created objects that were sized according to the fully zoomed dimensions.  Then I tweaked iscroll to start at at 0.5 zoom level (and thus, the objects were 1/2 size).  Then, when zooming to 1x zoom level, everything ended up at their original size.  I don't know if that would work for your case, and I did have to make a few minor tweaks to the iscroll.js code, but it does pan and zoom without any blurriness.

Sorry I couldn't be of more help.

-Gene

[Jay]

Hi Gene,

NO worries, understandable. Last query if that's ok. When you start your object from 0.5 zoom - is the quality of the background image retain sharp?

Thanks for the info. Much appreciated for the reply.

Kind regards,

-Jay

[Gene Loparco]

Hi Jay, the images look clear, both at the 0.5 zoom level and the 1 zoom level.  You will not see blurriness if you scale down a large image to something smaller.  The reverse is where you get into trouble.

-Gene