[Support request] Parallax a bit choppy

[Izzy]

Hello!
I’m using parallax with a page hero background image. When I scroll it’s pretty choppy, almost like the y position of the image is taking a bit too long to update in the CSS or something. Latest version of Chrome/Safari/Firefox tested.

Any thoughts on how to smooth this out?

-Izzy

GeneratePress 2.2.2

GP Premium 1.7.8

[Tom]

Hey Izzy,

Just tested this on a couple of browsers and didn’t notice any issues. Any chance you can share a video/gif of the issue as you’re seeing it?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Izzy]

Tom,
That is interesting. Here’s a video:

I’m running a 2017 15″ Mac.

-Izzy

[Izzy]

It’s the jitter that’s driving me nuts 🙂

[Leo]

Any chance you can try incognito mode to eliminate any browser extension conflicts?

Let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Izzy]

Leo,
That looks great in Chrome, but it actually got a bit worse in Firefox. That being the case, I pulled the console up and saw this in incognito as well as normal firefox sessions:

Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

Seems to be related.

-Izzy

[Tom]

What version of Firefox are you using?

Does it happen here as well?: http://gpsites.co/mellow/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Izzy]

66.0.3 (64-bit), running a mac.

[Tom]

Does it happen on the site I linked to as well?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Izzy]

Tom,
Thanks for the reply! I’ll check this out a little later, my day job’s sec does not like the site.

[Izzy]

Still choppy on my end in firefox. Chrome looks OK, no console errors.

Firefox still producing an error:

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

[Tom]

In that case, it may just be the vanilla JS script we’re using. I’ll do some digging.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Izzy]

Awesome! Most appreciated Tom.

[Izzy]

Tom and Team,
I’m using a bit of a work-around with CSS:

.page-hero {
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
}

It’s not perfect but it’s smooth. There’s a much more in-depth version of doing this with CSS over at codepen but I’m still toying with the attributes/values. Pure CSS for parallax looks promising.

Turns out all of my CSP warnings were recaptcha-related. Any luck with the asynchronous scroll issue?

-Izzy

[Tom]

I wonder which attribute there is helping the most. Any chance you can remove them one by one to check?

No need on the scroll thing. Does that message go away if you turn off parallax?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts