â–Ľ
Streaming live at 10am (PST)

Fixed backgrounds flash, load slow, or other general buggy behavior

Design help General
#1

Hi Everyone,

first off - here is the webflow link

https://webflow.com/design/seven-new-wonders-v218111426?preview=15e28d06069e8b505df01aea5c2088c7

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.

Please, any suggestions will be welcome!

Cheers
Fagan

#2

Just thought I’d bump this in case it’s lost in the forums forever!

#3

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. :slight_smile:

Hope this helps!

#4

Thanks for the reply - but I have already been through this with the webflow support staff. Removing all the styles does not work unfortunately.

#5

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.

#6

Hi all,

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

-Dan

#7

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?

Thanks
F

#8

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!

#9

it would be awesome if you could try help! here is the new link

https://webflow.com/design/seven-urban-wonders?preview=45a9c29a2864124fb45b89c1ce467c6a

#10

any luck with this? I’m about to complete this project

#11

Hi @Fagan_Wilcox, thanks for following up on this. I made a copy of your site and restructured the elements so they didn’t rely on position:relative anymore. Take a peek here:
https://preview.webflow.com/preview/seven-urban-wonders11075350?preview=9b47ee4a123a841cb8ac2bfe310c989d

Hope this helps! :slight_smile:

1 Like
#12