search

motiondivision / motion

A modern animation library for React and JavaScript
https://motion.dev
MIT License
25.84k stars 849 forks source link

Only add `"transform"` to `will-change` #2818

Closed mattgperry closed 1 month ago

mattgperry commented 1 month ago

This PR changes the behaviour of auto will-change. Rather than add every animating value to will-change (as preferred) it only enables layerisation by adding "transform".

This prevents a bug in Chrome that flattens the 3D perspective of an element when will-change: opacity/filter/clip-path is added, rather than when one of those values is non-default.

lochie commented 1 month ago

@mattgperry just a heads up that this update caused some unexpected breaking changes.

The change of the automated will-change property from opacity to transform breaks z-index and height: x% within child elements, and I'm sure there are a few other quirks that could occur as well.

https://github.com/user-attachments/assets/2f5acb77-a5e5-4c45-8b68-5fa040c47132

I resolved this by overriding with will-change:opacity !important;, but am wondering if there a flag to disable framer-motion's automated will-change property? If not, it might be good to have ☺️

mattgperry commented 1 month ago

@lochie Yeah I can see a config option being useful. But also I am inclined to changing it back to how it was and fixing this Chrome behaviour (only really a problem in Framer) another way.

mattgperry commented 1 month ago

@lochie Btw you can also just set style={{ willChange: "opacity" }} on the component to override

lochie commented 1 month ago

@mattgperry would be nice to change it back if possible, but I don't know the full scale of this feature so I don't wish to push this in any particular direction, I just wanted to alert of an issue that appeared for me.

And just tested style={{ willChange: "opacity" }} does fix it. I think I just added !important because I was rushing to fix 😅

Thanks for the response, and as always, love your work 🙏