Select fixed background images stopped showing on Chrome

Design help General
1

Hi Guys,

Wonder if anyone can help, I have a client site https://www.kesslersystems.de/ where recently some background images that are fixed stopped showing in Chrome, the ones in the sections of https://www.kesslersystems.de/e2ms but notice that the header one is also fixed but working!

I looked into Fixed attachment background image flicker/disappear in chrome when coupled with a css transform - Stack Overflow as possible reason/fix, however changing itself .section-bg to static or the wrapper .page-wrapper only messes up the whole design and the fixed bgs still don’t work.

Here is the site Read-Only LINK, can you suggest an alternative fix? What could be causing this? When we launched the site it was 100% working, could this be related to a recent Chrome update?

Thanks so much for any help in advance,

Cheers,
P.

2

It’s strange that it works fine on Design mode in Chrome, just not when published!

I’m going to fix the backgrounds as a workaround for now.

3

I cannot spot where there’s something to be fixed.

4

Hi @vincent, I literally just made them set to scroll.

On https://www.kesslersystems.de/e2ms if you change one of the .section-bg to background-attachment:fixed; it works fine in Firefox:

image
image1907×932 655 KB

Just not on Chrome.

5

Notice that the header image on that E2MS page is also fixed, and works fine!

It’s just anything under .page-wrapper that seems affected, I’ve tried to apply the fix from the Stackflow thread above (make it static, or remove relative positioning of all parent) to no effect.

1 Like
6

And started with recent Chrome versions, at the time this was published, a year or so ago (Bespoke PSD to WebFlow build) it was working just fine :persevere:

7

What’s even more frustrating is that it works fine (background-attachment:fixed;) on Design mode in Chrome:

image
image1898×858 600 KB

8

I can confirm that a recent Google Chrome update has busted fixed backgrounds. I have the same issue as you, I checked my website on 18th of May and the backgrounds were working fine. Today I checked again and the backgrounds were no longer working as intended. No code was changed. On Firefox and IE it is working properly, the problem only occurs on Chrome.

For now, just set it to scroll or local, fixed is bugged. Google will fix it probably.

9

So that is really true ? I have the same problem today, fixed background images are not being displayed on chrome desktop. What a shame on Chrome’s side to push such a buggy update.

10

Try this on the element that has the fixed background:

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

It’s a stupid hack to fix the issue with the fixed background.

2 Likes
11

But it’s so random, I bet it has something to do with the positioning of parent elements.

I will try the fix later (it Chrome don’t sort it first) for now they are all set as scroll so client is happy :smiley:

12

THANK YOU.

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); worked. Awesome stuff.

13

Hello all,
I’m having this historical issue today. Anyone else?
You’ll see that my portrait is no longer scrolling as a background image in live view, but strangely is working in designer view. This seems to be the same problem people were having back in '18.
Any help on a solve would be very much appreciated!

read-only link:
https://preview.webflow.com/preview/createsimple-work?utm_medium=preview_link&utm_source=designer&utm_content=createsimple-work&preview=dbcb2aa14915cef77d85dfa878ef2a83&pageId=61bb3b3b6f3c0c19e135e084&workflow=preview