The issue here relates to the parallax images toward the bottom of the page. In Webflow edit mode - you can see it views just fine. BUT when in preview mode, or I export the code I get very glitchy behaviour. In addition to this issue, the background goes from fixed (giving the parallax effect) to static and scrolls with the screen.
I am at a loss as to exactly what is causing this on Chrome. I have a suspicion, this is to do with background-attachment: fixed.
Hi @Fagan_Wilcox, not sure if this was related to the other issue, but just in case you missed it - you can try to resolve this by clearing unused styles (keep clearing them until they are all gone)
Long story short, the empty/unused styles are breaking the background images.
Hi @Fagan_Wilcox, Sorry, about the background image trouble. I’ve changed this thread to Bug and have reached out to our dev team to take a closer look. Hoping to learn more about this issue asap.
@Fagan_Wilcox is correct. Chrome has notoriously bad support for background-attachment: fixed.
In your particular case, it seems that your use of “Position: Relative” is triggering the bug.
I would recommend you try an alternative div structure for these fixed background sections, that avoids any use of “Position: Relative”. It seems that Chrome will only behave properly when the Position is set to “static” (also known as: “Auto” in webflow)
Great looking site, I hope you’re able to get Chrome to play nicely.
Thanks for the reply. I’m glad the bug is confirmed.
However I’d like clarification on your suggestion to use an alternative structure, how can I use an alternative structure to achieve the same effect without the position being set to relative?
Hi @Fagan_Wilcox, I’m happy to try and take another look at this for you. I looked at your read-only link and it appeared to be disabled. Can you please post it here again? I’ll try to structure it in a way that prevents the shifty background image behavior. :-/ Thanks in advance!
