[BUG] Re-opening #1837: Hardware-accelerated opacity animations breaking stacking context

[hiddenest]

1. Read the FAQs 👇

2. Describe the bug
Re-opening #1837 issue.
the elements that applied opacity animations by framer-motion, are hide behind the position: relative areas.
It works normally until v7.8.1.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
Copied some of my sample code running in production:

• CodeSandbox Link
• GitHub Repository

4. Steps to reproduce

Steps to reproduce the behavior:

1. Check 'Hide Fake Element' checkbox as checked
2. Click 'Click me' button
3. Click 'Toggle' button
4. See error

5. Expected behavior

As-is

To-be
Relative Area should not hide the menu areas.

6. Video or screenshots

If applicable, add a video or screenshots to help explain the bug.

2023-01-08.9.48.05.mov

7. Environment details

Mac OS 13, Chrome 108. Setup project with React 18 + TypeScript based on Vite official template.

[mattgperry]

To some extent this is expected.

What's happening is the layer with the opacity animation is creating a new stacking context. So the child with the high z-index is having no effect vs the "Relative" layer.

Any element with a non 1 opacity is a new stacking context: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

So this would already have been a problem in older versions of Framer Motion during the animation itself. Probably masked a little bit by the visual nature of opacity animations.

The difference now is this stacking context is persisting beyond the end of animation but to be honest the visual output of a consistent stacking context is more desirable than it flicking in and out. So I'm not going to fix it within Framer Motion (I actually couldn't if we wanted hw-accelerated animations), and a fix you could try here is by moving z-index to the element that shares a stacking context with the "Relative" element: The element with the opacity animation.

[hiddenest]

@mattgperry thx for your help!
fixed by adding z-index: 1 to the element with the opacity animation 💪