Jump to content


Can't get clear text when scaling

Recommended Posts

Both with Draggable and even without it, I can't get clear text when scaling. 


See the Pen eNajXR by anon (@anon) on CodePen

Link to comment
Share on other sites

This is due to various browser bugs when transforming text nodes or elements with text as children.


There will be some slight bluriness in webkit due to a bug.. sometimes you can get around it by:

  • setting your text larger then scale down at runtime.
  • and then scale to a zoom factor of 1

Scaling past a zoom factor of 1  causes this bug to show its evil colors in webkit based browsers.


This example only scales to zoom factor of 1 (with draggable)


See the Pen EjzeVL by jonathan (@jonathan) on CodePen


without draggable:


See the Pen emyggv by jonathan (@jonathan) on CodePen


There was recent updates to Chrome webkit (blink) that causes a new bug so blurriness is back when scale factor is above 1


You must use transformStyle:"preserve-3d"  and transformPerspective  or either perspective on the parent


I hope this helps :)



I had to edit my original post due to the shenanigans of this webkit bug rearing its ugly head again.

  • Like 3
Link to comment
Share on other sites

Hi geddski  :)


Jonathan is right , but in addition , if that's simple element like a simple text , you can turn off force3D too ,  by force3D:false in your tween Vars .


like this : 

See the Pen KpLxpW by MAW (@MAW) on CodePen

  • Like 2
Link to comment
Share on other sites

To add to Diaco's great advice.. the reason behind why he advises to set force3D to false is because GSAP's default is force3D:"auto"  .. which basically will force3D to true (3d transform) during animation and then automatically turn force3D to false (2d transform) when the animation ends.


This is to prevent other browser bugs (mostly webkit) when an element has a 3d transform which can cause it to render wrong in its static position, when the animation state ends. Which is a good thing! So if you dont need 3d transforms Diacos solution is the simplest!


Good job bringing that up Diaco! :)


force3D is part of the CSSPlugin



As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details about performance.

  • Like 1
Link to comment
Share on other sites

Money! Setting force3d to false gives it the behavior I'm looking for. Thanks fellas!

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.