TranslateZ transform causes blurry text

I have noticed that in Chrome, on non-retina displays, text can sometimes be blurry when using a scale transition (on whileTap for instance):

vs

I’ve tracked this down to the translateZ(0px) that is added to the transform automatically.

• transform: translateY(0px) scale(1.025) translateZ(0px); -> blurryness 👎
• transform: translateY(0px) scale(1.025) -> no blurryness 👌

Here’s a Sandbox where you can see the problem by tapping one of the items, and also see the solution (Project 3 is with translateZ, Project 4 is without):

https://codesandbox.io/s/framer-motion-blurry-text-issue-ryz76

The translateZ is probably added for performance reasons / to force GPU rendering, but in this case, it does not deliver the desired result. I would much rather have sharp text than better performance. Note that also the item’s border seems to be a little less sharp. Is there a way to selectively disable this translateZ behaviour, or otherwise best practices to ensure things are rendered sharply?

[mattgperry]

There isn’t one I’m afraid. Once something is hardware accelerated it’s a bitmap uploaded onto the GPU. So when it’s upscaled you start to stretch that bitmap rather than re-rasterise the vectors (like the fonts).

The only way around it is to handle layout yourself, render bigger elements to begin with and work with varying down scales like 0.5 normal and 0.6 hover for instance.

[mattgperry]

The blurriness is caused by hardware acceleration. You can force a component not to use hardware acceleration by providing a custom transformTemplate prop. https://www.framer.com/api/motion/component/#motionprops.transformtemplate