New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hardware-accelerated opacity animations breaking stacking context #1837
Comments
I also encountered this when bumping deps and had to roll back ultimately. Adding a duration to the transition involving opacity kind of worked but only for very simple transitions, I thought i was going nuts so I am glad to see that someone else has the same issue and came to the same conclusion I did - that it had to do with the hardware acceleration |
I had same problem when I applied motion to my navbar, but I fixed it using z-index. |
I can look into this further with a sandbox reproduction. Can someone try their working animation after applying |
framer-motion should not be updated to the latest version, see: framer/motion#1837
Similar issue here, after updating to latest any animations with opacity went crazy. For instance, using Downgraded for now because most of my animations were using |
Same issue here. I just tried to update to v7.10.2, but suddenly the opacity didn't animate. https://github.com/enjidev/enji.dev/blob/main/src/components/shared/Header/PageHeader.tsx |
Happy to take a look, please reopen with a sandbox. |
For me waapi opacity animation not working at all. Forked from official example https://codesandbox.io/s/framer-motion-transitionend-forked-nrt5n1. Downgrading to 7.8.1 or manually setting |
Thanks @ruvkr! |
This has been closed thanks to a fix about to go out in |
Thank you @mattgperry. Working great now. |
I am still experiencing some problems with the stacking context. Is it only me? |
@AndreaEsposit No have the same issue still. But didn't take the time yet to create a sandbox example. |
@mattgperry Hi, I've created another issue caused by hardware-accelerated opacity animations. Could you check this issue? I've just attached some codesandbox and some codebases. |
I build a companion app for the video game Destiny 2 called Bray.tech. I blindly updated my packages a few days ago because I enjoy gambling. I've spent hours fiddling with CSS before giving up and going through my packages one by one version by version to find the culprit. I found no issues up until 7.9.0.
So, the issue: wherever I use a motion component which animates
opacity
, stacking contexts everywhere go wild causing very unwanted and possibly unnecessary behaviours on neighbours and children, as well the browser skipping steps like thebackdrop-filter
property for the acrylic look.Here's a drop-down menu lookin' nice:
Here's the same drop-down but its parent and its parent's neighbours animated on
opacity
.Here's some code - commenting out opacity properties fixes it but opacity is like key to transitional animations so:
As frustrated as I've found this experience, I'm very happy that I can now reproduce the bug consistently. Video available on request.
The text was updated successfully, but these errors were encountered: