Chrome (on Mac) breaks 2017 parallax scrolling

Thank you so much @caltuna123!

I joined to just to say thanks. I spent hours troubleshooting until I came across your post.

The only thing I would like to say to the super new WP users is to put add this to Appearance –> Customize –> Additional CSS.

Thanks a million!

Thanks for the kind words.

We don’t use the “Additional CSS” field in the Customizer as I don’t trust it to be update-proof. We always create a child theme as we often have to add functionality to functions,php as well as our own styling to a custom CSS style sheet. With a child-theme, we are (more) assured that our additions and changes will be update-proof.

We are probably being over cautious but in the 12 years we’ve been doing WP sites for clients, we’ve seen “new features” that we were told were ‘safe from update’ when in fact they weren’t. There are few things more jarring than getting that early Monday morning phone call from a client-in-panic saying their site is broken after he or she did a WP update. We never get them anymore. Yes it is more work to set up a child-theme, but well worth the effort… if for nothing else than the peace of mind!

YMMV

• This reply was modified 6 years, 8 months ago by caltuna123.

Version 67.0.3396.99 (Official Build) (64-bit)

There is a new version of the Chrome browser for Mac out, but it does not fix the problem… at least not for me. I still have to use the media query above.

I’m surprised there has not be more reaction to this… or perhaps very few people use the 2017 WP theme.

I found a different (better?) way to fix the problem. Forget about the media query above and instead just pop this in the CSS:

.twentyseventeen-panel {
position: initial;
}

What I found is that WITHOUT the media query a twenty-seventeen site worked fine on my old MacAir but not on my iMac… each having the same version of macOS (High Sierra) and same version of Chrome Version 67.0.3396.99 (Official Build) (64-bit).

I swear, I don’t understand why the site workED on one piece of hardware and not on the other. Yes, I tried clearing history, cache, cookies, etc.

Once I put in the above, the site worked fine on both hardware… at least with my somewhat limited testing so far.

The original CSS is:

.twentyseventeen-panel {
overflow: hidden;
position: relative;
}

Once I overrode the “relative” with “initial” it worked. Maybe someone with better CSS creds than I can explain it?

My only guess is that the iMac is a Retina and the old MacAir is not… and perhaps Chrome checks for that and executes different code for the different hardware?

I hope someone will test out the above and verify.

• This reply was modified 6 years, 8 months ago by caltuna123.

Hi,
I also have a Macbook Air and use Chrome. I’ve uploaded 5 images to be displayed on header and randomize them. Because there is no parallax scrolling on page (the main reason I’ve choose 20/17 theme), I’ve added the CSS you mentioned in Appearance –> Customize –> Additional CSS.
.twentyseventeen-panel {
position: initial;
}
and no change. Then I wrote
.panel-image {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
}
this one gave me multiple errors.

I’m not familiar with CSS, understand them I meant, I am just writing what is given.
Would you please tell me your opinion so I can solve this issue. Anyway, since I’ve installed this theme, I never experienced parallax scrolling.

Thank you so much.

This is my website:
https://www.kameleonchic.com

• This reply was modified 6 years, 8 months ago by KameleonChic.

I’m not sure you set up your theme correctly in Customizer. For each page that you want scrolling on, you have to create a Featured Image… and it needs to be rather large but if not, WP will enlarge it.

Do you have a Featured Image on each of your pages that you entered in Appearance, Customize, Theme Options?

Also you have a bunch of plugins and perhaps one of them is interfering with the scrolling?

The scrolling works on the homepage with the big fish picture.

thank you very much for this

I don’t understand why EITHER Chrome has not put out an update that fixes this issue OR www.remarpro.com has not put out a theme revision.

Maybe neither of them know about the problem?

Thank you @caltuna123, this helped a lot.

Here is what I did in my child theme: I put the following code snippet into the styles.css (of my child theme), according to your post (see above):

.twentyseventeen-panel {
position: initial;
}

And that’s it. It works perfectly.

Thank you once more.

I’m glad it works. I wonder when WP will update the 2017 theme. Maybe someone has to fill out a ‘trouble report’ or something.

It looks like the latest version of the Chrome browser (for Mac) has fixed the problem. I tested with the CSS ‘fix’ and without it, and the theme now works either way so I left it in figuring that some people will not update Chrome (To update on Mac go to Chrome menu, About Google Chrome and you will be taken to the ‘update’ screen. Current version for me is: Version 68.0.3440.75 (Official Build) (64-bit).

There is also an update to the 2017 theme but I tried Chrome before I did the WP update so I’m thinking the problem was always with Chrome and not WP. Here is the site in case you want to try it on your version of Chrome. (Note I use a child-theme with it’s own CSS and you can see the ‘fix’ code at the very end of the file: https://adamsblakebookservices.com/wp2/wp-content/themes/twentyseventeen-child/child-style.css?ver=1.0.0

.twentyseventeen-panel {
position: initial;
}

I guess it ends here… and all is well that ends well!