Live website link
Read-only link
Steps to Reproduce:
- Scroll down the page, below the full-height header.
What happens in Firefox (working):
- The hero text “Official Video” neatly hides below the page content as you scroll. This is by design and is functioning correctly as content
z-index = 600, while hero textz-index = 1. - You can scroll up & down 500 times and it’ll never glitch.
What happens in Chrome/Edge Legacy (not working/buggy):
- As you scroll down, the hero text (
z-index = 1) sometimes overlaps the content (z-index = 600). Then, after a moment, it pops back under. - As you scroll up & down, the z-index doesn’t matter: the hero text always appears over the content and then immediately “fixes” itself.
A video: https://streamable.com/0e4lr
I know z-index can be tricky, but have I done something wrong in the CSS? Because the behavior is different between browsers, I’m inclined to think this is a Webflow bug. Because this is CSS, I’m also inclined to think this is completely my fault. 
Environment:
- Google Chrome 80.0.3987.87 (64-bit)
- Microsoft Edge Legacy 44.18362.449.0
- Mozilla Firefox 72.0.2 (64-bit)
- Windows 10 Pro x64 1909 (18363.592)