Very odd behaviour

Design help General
1

Hey folks,

I’ve just been adding a few pages to my website and they’re using static image backgrounds to create a parralax-like effect where other sections appear to scroll over the top. This has all been working just fine until about an hour ago when for no apparent reason Chrome decided to stop this functionality on my PC, but nobody elses.

Everything works as expected in edge/internet explorer and get this… it works in chrome but only when the page is loaded WITHIN the webflow editor. And if that wasn’t strange enough the problem persists on my phone - suggesting it’s linked to my google account that I’m logged into on chrome (?), though logging out doesn’t solve it.

I am utterly perplexed.

I’ve tried loading the page from scratch (ctrl + F5), I’ve uninstalled and reinstalled chrome, I’ve logged out of my google/chrome account, I’ve deleted all the browsing history/data, I’ve used the chrome devtools to disable cache. I’ve tried incognito mode.

Hopefully someone here will know exactly what it is and point me in the right direction.

Here’s a link to the offending page:

http://roberts-limbrick.webflow.io/services

and the read-only link:

https://preview.webflow.com/preview/roberts-limbrick?preview=17cf1ed66cc0eb6e9c6cc667f77ae01f

2

I’ve tested on Chrome this end and all works fine. Are there any browser extensions that could be causing it?

This team member description is hilarious though… :joy:
CloudApp

3

It’s quite accurate.

I’ve tried it without any extensions and still to no avail. It’s so strange that it works within webflow for me, but not on the published site.

4

Hi @Brando, any idea what could be causing this?

5

Hi @Macker @magicmark

Great questions and thanks for pinging me.

Are you by chance on a touch screen laptop, @Macker?

If so, we actually have some javascript in place which prevents fixed backgrounds images from rendering as fixed on touch screen devices. We do this because there are some known repainting css issues caused by fixed background images on elements (it’s also really heavy on CPU’s).

A work around that may help is to set a Fixed element as the background, try the following:

  • Make your fixed bg images set to Position: Fixed
  • Width: 100%, Height: 20vh (or whatever works best)
  • You may also need to use padding / margin on the adjacent sections to create space
  • Adjust the z-index value for these elements to sit behind all other elements

The above steps may be tricky to implement because there are several fixed image sections, but should be possible. You may need to work in interactions to hide/show these fixed sections based on where you are on the page. Alternatively, you can leave the design as is and for all users on touch screen devices the images will not appear fixed, but for other devices they will.

Hope this helps :slight_smile:

2 Likes
6

Thanks for the help and apologies for my chronically late reply. I think given that it seems to work on everyone-except-mine computers I’ll leave it as it is and hope that it carries on working for others.

1 Like