Hardware-accelerated opacity animations breaking stacking context

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.

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

[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