Bluriness and Pixelation on Matrix Transform in Safari5

[levib]

We're working on a project that uses Greensock to run some light animations, one being a zoom in function. Overall it works great in most browses.

When we zoom in function on Safari 5, it gets blurry and pixelated. See this screenshot: http://cl.ly/image/2N0f3i2q0t0I

Is there a fallback for this issue?

[jackdoyle]

That actually has nothing to do with GSAP - it's just the way Safari renders things (it would look the same if you applied the transform yourself manually). The best way to optimize the appearance is to make the native size your maximum so that your scaleX/scaleY never exceed 1 (or at least not by much). Imagine the browser taking a screen capture of the image at its native size and then just stretching/squeezing/scaling that capture's pixels. If you start with a very small object and scale it up to 500% its native size, the pixels will look very blurry in Safari, but if you start with the object at a large size and scale it down immediately and then animate it back up to scaleX/scaleY of 1, it'll look much better.

Make sense?

[levib]

Thanks, this is great @jackdoyle!