I noticed that there is a hidden background appearing while I am scrolling in the “Prism Operations” section on my website for a short period of time. As soon as I refresh the page, this issue disappears. Additionally, I observed that this problem only occurs on Safari and not on Google Chrome.
Can you also post the staging website link for the site? I suspect this will be easier to find in the browser’s inspect elements tool than in the designer.
@mxsime I don’t have Safari unfortunately so I can’t test on my end the fixes I’m about to propose but I have a couple ideas that may help to fix this:
It seems like the issue is definitely interaction related, especially because when you scroll the entire section off the screen the issue of the Footer appearing beneath the header comes back (see around the 15 second mark of your video).
I would try removing the Interaction on the Section level that hides/shows the Project BG. I think your Project BG animations controls the visibility through opacity anyway. I would also try lowering the Z-Index of the Footer element to make sure its rendering below the Section’s background color instead of between it and the headings.