lenis icon indicating copy to clipboard operation
lenis copied to clipboard

"background-attachment" property causes janky scrolling on Safari

Open AaronMassingham opened this issue 2 years ago • 6 comments

Describe the bug More of a PSA - I'm aware that position:fixed is on the radar but take care when using the background-attachment: fixed property too. This can cause a janky experience while scrolling.

To Reproduce Device: MacBook Pro 15" 2018 Browser ver: Safari v17.0 iOS: Sonoma v14.0

AaronMassingham avatar Nov 16 '23 12:11 AaronMassingham

closing this in favour of issue #103

clementroche avatar Feb 08 '24 21:02 clementroche

What was the issue, the linked issue is 404...?

23d1 avatar Jun 09 '24 06:06 23d1

@23d1 fixed the link

feledori avatar Jun 10 '24 13:06 feledori

@feledori thanks! Hmm, it seems to potentially be a slightly different topic.

The issue I'm running into is with gsap scrolltrigger and counteracting the smooth scroll with background-position to emulate background-attachment: fixed. Scrolling sort of grabs those elements, similar to how a page would work when touch scrolling on an iDevice. It's still smooth, but sort of springs out of place and back into into place with every scroll up and down, and then jitters into place across the easing. This is the case across Chrome and Safari.

23d1 avatar Jun 18 '24 02:06 23d1

hmm, @clementroche you know more.

feledori avatar Jun 19 '24 13:06 feledori

@23d1 please provide a reproduction link

clementroche avatar Jul 28 '24 19:07 clementroche