Z Index Behaving Strangely

Hi All! Getting a funky behavioral issue that I can’t figure out. I’ve got a hero section that is sticky, and then a darkening DIV block that fades in as the page is scrolled. The sections below are meant to scroll in on top. On Safari, it will show the “episodes” blocks below content, and then after you mouse over the image animation, it pops on top. In fact, if I swap the sections, whichever is first will be normal, whatever is second and beyond will misbehave. Chrome works normally. Is this an error on my part or something else? Read only link below. Thanks!

Here is my site Read-Only: https://preview.webflow.com/preview/audio-wool?utm_medium=preview_link&utm_source=designer&utm_content=audio-wool&preview=88706393b5033e992c18a1af454808b7&workflow=preview

I ran into this on another design, and still haven’t fixed it. Anyone have any ideas?

Another one. Anyone able to help out?

Hey, I would load every browser too. Edge, Opera, Opera GX, Firefox, then do a test so you can narrow to just one. Because if it’s Safari, then there’s probably not much you can do but change the interaction.

I can’t even get Safari to work on my laptop (Windows 10). Of course, they don’t make it anymore but I still try to test with it. Opera is obviously the best browser out. It looks good and easy to use. All interactions use front end code which can be hit or miss. Safari is definitely the worst culprit for this. It used to be IE, but Edge is much better. So the lone wolf is Safari. And you may have to adjust the animation.

Test them all and see.