I’m having some trouble with setting a background image to fixed, where I get inconsistent results when I publish the page. I made a short video here to explain:
I have checked the developer consoles for Chrome and Firefox and didn’t see anything suspicious. I have tested this in Chrome Incognito and Firefox Private modes, but no difference.
I’m not sure if I’m just not using Webflow correctly; thanks in advance for any help.
To begin with, define an actual image instead of testing with the placeholder image.
And just to be sure, start fresh with your classes, remove the actual ones and define new ones, add a fix background, and test again. i’m sure this will solve some things.
As a note, I tested in Chrome, and it seemed to scroll for me, but might be due to background-attachment: fixed getting changed to background-attachment:scroll (like classic ios bug)
@wzahra, I am looking into this further. Although I think this is going to render correctly in most browsers, I will check with dev team to see what we can do to eliminate this issue.
Also, applying the Fixed position to an element like a div, will usually render ok on mobile, it seems that the issue crops up when using fixed on a bg image style attribute with position Fixed, instead of an actual tag like <div> with position Fixed.
Could it be a nasty case of cache issue with your browser? Here are some steps.
open the publish dialog of the Designer and click unpublish
open the designer in Chrome Canary (download and install, it’s a development version of chrome that you can be sure doesn’t share any cache with Chrome, it’s always handy to have around)
publish and check from Canary
Because really I can’t reproduce this bug on any browser. I know fixed background won’t be fixed on mobile, iOS, but that has nothing to do with your issue here.
I downloaded Canary and it works fine, there. I cleared the cache in my regular Chrome and also Firefox, but still not working. I also tried in regular Chrome Ignotito mode, but that didn’t work, either.
Dave suggested implementing the following, but I’ll need to enlist some help as I’m having difficulty following the instructions:
p.s. in my video, I was fooling around with the background color, you can play with whatever content colors you want, or leave individual sections as transparent. Those sections that are transparent will reveal the fixed background. This is just a temporary workaround/solution that may help while the issue is being looked into.
what if I need two fixed background images in different sections of the page?
If I do it as fixed background for each specific page, the fix image on each div works fine unless I’m on a touchscreen laptop. this is the css that is overriding it:
I understand this is good for mobile/small touchscreen devices, but in laptops I would like it to work normal.
Is there a way to override this with css?
The only other fix i can imagine is doing your solution, creating 2 fix divs with z indez -1 and -2 and make animations that plays with the z index while scrolling the other sections