Chrome Parallax Bug

[wowflak]

Hi

I am having only certain windows 10 users in Chrome having issues with a parallax background image. The page loads fine for a second then the image explodes.

Page is here:

About | Concord

I researched and tried a fix from here:
https://productforums.google.com/forum/#!topic/chrome/DC4IFvGXdIA;context-place=topicsearchin/chrome/category$3Awindows-10|sort:relevance|spell:false

Tried adding this:
.x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
}

also now tried this:
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {

.x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
}
but still does not work right…

Also browserstack is not showing the problem. It is only showing on live machine

[christopher]

Hi @wowflak,

I also could not recreate the problem. This seems to be a fringe case which looks like a browser problem. We will double check the case to see if there are any possible fixes or not.

The only thing that we can suggest is that you ask your customers to make sure that they update to the latest version of the Chrome browser.

If the windows 10 Chrome users are the majority of your customers I suggest that you avoid using the parallax effect at the moment till there is a fix by the Chrome.

Thank you for your understanding.

[wowflak]

Looks like I found the fix. It is related to touchscreen pc’s. If I add this rule:

.x-section.bg-image {
background-attachment:fixed !important;
}

It fixes the issue.

[rad]

Thanks for sharing, yes, since they are touch devices, they are also considered a mobile or tablet where parallax isn’t going to work properly.