1

On this Joomla site, I'm experiencing scroll jitter under the following conditions:

(1) with fixed background images.

(2) in Safari

(3) And with jquery enabled.

Scrolling is nice and smooth if I remove any of those variables. That is, if I make the background images attachment:scroll, or if I test the site in Firefox or Chrome, or if I disable jquery, then scrolling becomes nice and smooth.

I am running the latest versions of all browsers on a MacBook Pro (OSX 10.15.1). The scroll jitter is much less noticeable if I'm using a mouse with a mousewheel, but it's awful when I'm using my trackpad.

When I use Safari's inspector to try to diagnose the problem, I can get it to go away by inserting a breakpoint under the "scroll" or "scrolling" event listeners, but since I don't know javascript I don't know what the specific problem is.

Maybe it has something to do with this general issue: https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects.

When I entirely remove my custom.js file, the problem doesn't go away. But when I remove jquery, the problem does go away. So apparently there's something about the way jquery interacts with fixed background images and Safari that's causing the problem.

Any pointers would be much appreciated. I'm just a beginner, learning as I go, so please excuse me if the question isn't proper or is badly put.

Update: I forgot to mention that the background images are only attachment:fixed at viewport widths ≥ 768px. At 767px and below they become attachment:scroll.

Update: I'm going to work on implementing scroll effects with AOS instead of JS + jQuery. Then I'll be able to remove jQuery entirely and see if that resolves the issue. In the meantime I will leave jQuery active in case anyone can answer the question above.

Update 11/21: I finished implementing scroll effects with AOS. Unfortunately, it turns out my Joomla template uses jQuery, so I can't remove it entirely. However, I feel better after discovering the same sort of jitter occurs in Safari on this professional demo of parallax scrolling with fixed background images (associated article is here). The jitter is less severe and smooths out eventually, but it's still noticeable. So it would appear the issue I'm trying to solve is a general one and perhaps not susceptible of a perfect fix at this time.

0 Answers0