Only add "transform" to will-change

[mattgperry]

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]

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

Screen.Recording.2024-10-04.at.12.48.35.PM.mov

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]

@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]

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

[lochie]

@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 🙏