Hidden Background Appearing


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.

staging domain: https://prism-acc731.webflow.io/

Do you have any idea why this is happening? Thank you in advance for your time.


Here is my site Read-Only: **Webflow - Prism

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.

Hi Caitlin, thank you for your time reaching back out. here it is : https://prism-acc731.webflow.io/

Can you try reuploading your video as well?

Hi @CaitlinRSE Caitlin, i reuploaded the video

@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.

Hope this helps! :blush:

Hi @CaitlinRSE, many thanks for your time. Lowering the Z-Index of the footer was the perfect solution. I’ll be sure to remember it! :blush: have a great day