Hardware-accelerated opacity animations breaking stacking context

[justrealmilk]

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 the backdrop-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:

export const VariantDrop: Variants = {
  initial: (options: CustomOptions = {}) => ({
    opacity: 0,
    y: options?.reverse ? -16 : 16,
  }),
  animate: (options: CustomOptions = { transition: {} }) => ({
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.5,
      ease: [0.33, 1, 0.68, 1],
      ...options.transition,
    },
  }),
  exit: (options: CustomOptions = { transition: {} }) => ({
    opacity: 0,
    y: options?.reverse ? -16 : 16,
    transition: {
      duration: 0.5,
      ease: [0.33, 1, 0.68, 1],
      ...options.transition,
    },
  }),
};

export function Div({ children, variant = 'drop', options, ...props }: Props & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CommonProperties>) {
  return (
    <motion.div custom={options} variants={Variant[variant]} initial={undefined} {...props}>
      {children}
    </motion.div>
  );
}

As frustrated as I've found this experience, I'm very happy that I can now reproduce the bug consistently. Video available on request.

[SamuelQuinones]

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

[Kawium]

I had same problem when I applied motion to my navbar, but I fixed it using z-index.

[mattgperry]

I can look into this further with a sandbox reproduction.

Can someone try their working animation after applying style={{ x: 1 }}? Does it break in the same way?

[manfromanotherland]

Similar issue here, after updating to latest any animations with opacity went crazy. For instance, using AnimatePresence would not animate the exit variant (opacity: 0), the only thing that kind of fixed for me was adding a duration to the exit prop (similar to what @SamuelQuinones did).

Downgraded for now because most of my animations were using opacity.

[enjidev]

I can look into this further with a sandbox reproduction.

Can someone try their working animation after applying style={{ x: 1 }}? Does it break in the same way?

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

[mattgperry]

Happy to take a look, please reopen with a sandbox.

[ruvkr]

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 type: 'spring' fixes the issue.

[mattgperry]

Thanks @ruvkr!

[mattgperry]

This has been closed thanks to a fix about to go out in 8.0.2 for @ruvkr's example, however I suspect there is a separate issue still here with stacking context. Please reopen with a sandbox example if this is still a problem.

[ruvkr]

Thank you @mattgperry. Working great now.

[AndreaEsposit]

I am still experiencing some problems with the stacking context. Is it only me?

[rmoedt]

@AndreaEsposit No have the same issue still. But didn't take the time yet to create a sandbox example.

[hiddenest]

@mattgperry Hi, I've created another issue caused by hardware-accelerated opacity animations. Could you check this issue? https://github.com/framer/motion/issues/1885

I've just attached some codesandbox and some codebases. btw, I couldn't reopening this issue because i didn't opened this issue :-(