Chrome text scaling jitters as it re-renders

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.

1 Like