Background change not working right on Safri?

Hello, I have a background change effect and when I look at it in Safari it does not work. Seems to work so far in Brave browser.

https://preview.webflow.com/preview/zocalo-food-park?utm_medium=preview_link&utm_source=designer&utm_content=zocalo-food-park&preview=49d8eb327bc87891232ae8edae3d4c81&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I’m not sure if this is related to your case but 100VH is long term problem in Safari and all your sections are set for some reason to 100VH. You can find more information about how to solve it on net. Hope you will find solution.

My section are setup up that way, because I went through a tutorial on bg color change and thats what it told me what to do. Is that normally not a good web design practice? Googled around and so far got results talking about a webkit?

@Stan Also those sections are working fine everywhere else, except for my merch section going into my youbelong section? So maybe it’s not exactly my 100vh design it might be something else?

1 Like

I saw that there is 20% offset on each section and 2-3 top sections are triggering in approx. in right position. You can check if this happen with other section. This mean copy any section in to problematic position and hide problematic section.

I didn’t went this way but if section trigger color change will work as expected problem will be in problematic section it self. If wrong trigger will happen even on newly positioned section the problem will be with 100VH causing offset for triggers.

So I have now hide merchmerch place there instead copy of about resutl was identical problem = wrong triggering. So then I have hide also you-belong and problem was gone. So hope that this narrowing to possibly problematic section you-belong will point you right direction. :slight_smile:

So Hide the you-belong bg?

try it, it worked for me, so I will start there

EDIT
I have double-checked and it works as expected
not only bg hide whole section and triggering will work as expected. This mean that problem is with you-belong

Ok, so I found out what is probably wrong with that section, and it might have something to do with overflow hidden because of the marquee.

Cool, fell free to check any response as solution to be this request marked as solved

@Stan Solved!

It was because the whole section had overflow hidden which was interfering with the bg holder. Once I changed overflow hidden to the div container instead of the whole section it worked as it should.

@Stan Thank you for helping find out that the problematic section was you-belong. It allowed me to keep tweaking until a solution was found. Thank you :pray:

1 Like

fell free to check any response as solution to be this request marked as solved otherwise will be still seen as open