Jump to content

Martin Lindelof

scaleX, scaleY, DIV becomes blury

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

My colleague had scaled a DIV container with text/vector graphics.

It looks super sharp on a retina screen in firefox, but on a regular monitor he has connected it looks blurry.


For me it looks like on the retina it has scaled the fonts, but on the regular screen it seems like it has bitmaped and scaled (everything is blurry)


Any workarounds? We used Elements inspector to check the width/height after scale and it´s whole pixel values.

Link to comment
Share on other sites

Sounds like just a browser rendering issue that's completely unrelated to GSAP. I have noticed, for example, that some browsers will basically take a screen capture of the element/image at its native size in the document flow and then scale that bitmap when you use transforms, thus it can look blurry at larger sizes (and again, only in certain browsers). For retina screens, I suspect Apple makes sure they DON'T use that screen capture algorithm (or they do it differently, capturing a much higher resolution "native" image). The tradeoff is probably speed and memory of course. Different browsers have different priorities. 


You could try just making your element much larger initially and then scale it down where you need to. That way you're ensuring that the "capture" has the better/more pixels. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.