Motion: TranslateZ transform causes blurry text

[rijk]

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]

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

[rijk]

Sweet. Thanks for the pointer! Worked like a charm.

In general, what guidelines do you apply for GPU vs non-GPU animations? The official Framer Motion examples are mostly just coloured squares with no text, so it doesn’t give much guidance. They might animate very smoothly, but if the text turns blurry it’s not really an option..

Are there ways to ensure items stay sharp even when using hardware-accelerated animations?

[rijk]

Wow, you are right though, performance is significantly worse with non-accelerated mode. I think I’ll stick to the defaults anyway (with translateZ) 🙂. Still, would be nice to find a way around the blur issue.

[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.

[Altiano]

I just want to added some question regarding this issue,
If I use x or y, it will cause blurry,
BUT, if I change to using left or top, it will not.

I guess it is smart enough to understand that no need for transalateX ?

[kyle-mccarthy]

@Altiano It looks like x and y are transform properties so they get GPU accelerated https://www.framer.com/api/motion/component/#transform