Webflow bug or my layout? Z-index jumps around in Chrome & Edge, but perfect in Firefox

Design help General
1

Live website link
Read-only link

Steps to Reproduce:

  1. Scroll down the page, below the full-height header.

What happens in Firefox (working):

  1. 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 text z-index = 1.
  2. You can scroll up & down 500 times and it’ll never glitch.

What happens in Chrome/Edge Legacy (not working/buggy):

  1. 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.
  2. 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. :rofl:

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)
2

Friendly bump. I can reproduce this issue on about 1/3 of the machines running Google Chrome available here…