Chrome text scaling jitters as it re-renders

(Jonathan Deutsch) #1

I recommend using scale transforms instead of the fonts size, which can only step on integral numbers. It will be smooth if you animate the width/height scales like other elements yet still render sharply.

GreenSock with hype
GreenSock with hype

yes, @jonathan I’m using scale transform on live text, never font size tweening.
To be specific, this strange jittering during scale transform of headline text has re-appeared only in Chrome browser’s latest versions. Desktop Safari and even Firefox reproduce text scale transforms in a pleasantly smooth way.

(Loves Hype) #3

I can confirm … this recording is on Chrome Version 72.0.3626.121 (Offizieller Build) (64-Bit)
Something interesting to note: In only appears on the GUN VIOLENCE chart. the other font is smooth… might it be that in one case your scaling a group?


I was suspecting the same @MaxZieb mentioned and I ungrouped the two lines of the headline – look at the elements in the main timeline. Having done this, I unfortunately can’t see any changes in Chrome’s weird render bug.

Some versions back Chrome overtrumped Firefox in smoothness of rendering of animated live text. Now Firefox Quantum got rid of its annoying render bug, but Chrome seemingly have caught on that.

I would love to have the possibility of converting text to a png with alfa inside Hype.

(Loves Hype) #6

Is it only a scale or do you some how influence positional data?


I used scale transform @MaxZieb with default (X50% Y50%) transform origin and opacity change, no placement /position keyframing.

(Jonathan Deutsch) #8

That’s very interesting. This isn’t the normal jitters, it looks like Chrome is re-rendering the text (good to keep it sharp) with slightly different metrics (bad!). Different fonts illustrate the a little better:

You can work around the issue by forcing 3D graphics acceleration on the element. An easy way to do this would be to add a 1 degree Y rotation. If you don’t like that it is subtly different, you can also add CSS that does a transform:rotateY(0deg) !important to the element, but that will really only work with the text that is in the group otherwise you’ll end up rewriting a used transform rule. The side effect is that large scaling will look blurry with this workaround since it will be using bitmap data and not re-rendering the text.

There don’t seem to be other properties or chrome flags that had an effect to improve this. I tried doing some out-of-Hype isolation to get a better grasp on it and file a bug, but ran into some reproducibility problems. I’ll work on it more later… I suspect this probably isn’t too noticeable on most faster animations.


Thank you @jonathan for a thorough investigation on this.

Sometimes the best workaround is to convert headline text to bitmap PNGs, as I did with the second headline - no headache with buggy browser-specific rendering!

When there is no explicit need to keep animated headline text editable and no need to keep the file size ‘slim’ for ad servers, I would love to have the possibility to convert text to a png with alfa on the fly inside Hype ( I’ve mentioned that already in Feature Requests Topic.)

(Jonathan Deutsch) #10

Yeah, it is definitely a good feature request… often anyways one small (in file size) png can be much better of a download than having to make an extra fetch for a font and deal with that.

If you ever hit rendering (or other bugs) please let us know as soon as possible – workarounds are great but often we can fix the problem for all users :slight_smile:.