Mr Baas Posted June 14, 2021 Share Posted June 14, 2021 Hi, I'm using Safari (version 14.1.1, on OSX Big Sur) and there seems to be an issue with vertical scrolling using mouse wheel when you use ScrollTrigger with horizontal: true. In other browsers like Chrome, Firefox I can scroll vertically using the mouse wheel when the mouse cursor is over the ScrollTriggered element, but in Safari when I scroll using the mouse wheel the page doesn't scroll up or down (you just get stuck with the cursor inside the element). Scrolling vertically using the touchpad seems to work correctly, though. I've included the CodePen from the gsap ScrollTrigger examples where the issue is present. Anyone else have this problem? Or is there a solution to make the mouse wheel work in Safari when you have a ScrollTrigger with horizontal: true? See the Pen JjYPgdp by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted June 14, 2021 Share Posted June 14, 2021 I'm on the same version of Safari as you, and it works perfectly fine for me. ScrollTrigger doesn't do any "scroll-jacking", so I suspect this may be an issue on your end(?) Can anyone else reproduce the issue? Link to comment Share on other sites More sharing options...
Daniel Biloglav Posted June 15, 2021 Share Posted June 15, 2021 I can reproduce the issue on the provided codepen. The scrolling is stops as soon as the image reaches the mouse pointer. I'm on Safari 14.1 on macOS Catalina. Link to comment Share on other sites More sharing options...
GreenSock Posted June 15, 2021 Share Posted June 15, 2021 And are you saying this issue is somehow related to ScrollTrigger? If you remove ScrollTrigger, the issue goes away? Again, I cannot reproduce. Link to comment Share on other sites More sharing options...
Mr Baas Posted June 15, 2021 Author Share Posted June 15, 2021 If I removing all javascript (keeping only the html and css, even removing the script imports) from the example given then vertical scroll works using the mouse wheel even if the cursor is over the image. I've also tried copying the html + css into a separate html document on my local computer on two different Macbook Pro computers and opening it in Safari browsers on both (Safari 14.1.1/Big Sur and Safari 14.1.1/Catalina) using two different mices (both Logitech) and it works, but as soon as I include the gsap.min.js (version 3.6.1) + ScrollTrigger.min.js (3.6.1) from the Cloudflare CDN and add the JavaScript found in the codepen, vertical scrolling stops working as soon as the pointer reaches the image part. Same html file works in Chrome if I do the same thing. I've also added an event listener for the "wheel" event to the element (.horizSlider) and I can see that WheelEvents are emitted when using the mouse wheel when the pointer is over the image, but the page isn't scrolled down. It's like the events aren't propagated somehow. Link to comment Share on other sites More sharing options...
Cassie Posted June 15, 2021 Share Posted June 15, 2021 It's working for me, safari on mac and ios. Link to comment Share on other sites More sharing options...
Mr Baas Posted June 15, 2021 Author Share Posted June 15, 2021 And you are both scrolling using the wheel on a regular mouse and not the built-in touchpad/touch screen? Link to comment Share on other sites More sharing options...
Cassie Posted June 15, 2021 Share Posted June 15, 2021 I have a magic mouse I'm afraid - so that's similar to a touchpad I think Link to comment Share on other sites More sharing options...
GreenSock Posted June 15, 2021 Share Posted June 15, 2021 Can you confirm that if you ONLY load the GSAP/ScrollTrigger files (but have NO other JavaScript executed...no ScrollTriggers created or any animations), it still won't scroll for you? Or are you saying that setting up the ScrollTriggers is what seems to cause the issue on your machine? Link to comment Share on other sites More sharing options...
Mr Baas Posted June 16, 2021 Author Share Posted June 16, 2021 Only adding the gsap/ScrollTrigger files (and no other JavaScript executed) doesn't trigger the problem and vertical scrolling using the mouse wheel works. It still works when adding gsap.registerPlugin(ScrollTrigger); But the problem arises when I add the following code: gsap.utils.toArray(".slideText").forEach(text => { gsap.timeline({ defaults: {ease: "none"}, scrollTrigger: { scroller: text.closest(".horizSlider"), horizontal: true, trigger: text.closest(".slide"), start: "left right", end: "left left", scrub: true } }) .fromTo(text, {x: 250}, {x: -250}, 0) .from(text.nextElementSibling, {scale: 0.8}, 0) }); As a side note, adding pointer-events: none; to class horizSlider makes vertical scrolling using mouse wheel work even when ScrollTriggers are applied, but then the touchpad doesn't work for horizontal scrolling between the images. Link to comment Share on other sites More sharing options...
GreenSock Posted June 18, 2021 Share Posted June 18, 2021 I still can't reproduce, so I'm taking shots in the dark here - do you still have the problem if you remove all the tweens and just leave the raw timeline instance? So no text or text.nextElementSibling animations whatsoever. Literally just an empty timeline with a ScrollTrigger. Or better yet, just a ScrollTrigger.create({...}) (no timeline at all)? Another question: does it make any difference if you remove the horizontal: true part? Link to comment Share on other sites More sharing options...
Mr Baas Posted June 18, 2021 Author Share Posted June 18, 2021 I think I've covered all the cases when mouse wheel (vertical) scrolling using a regular mouse works and when it doesn't. Does not work: Remove all tweens: gsap.utils.toArray(".slideText").forEach(text => { gsap.timeline({ defaults: {ease: "none"}, scrollTrigger: { scroller: text.closest(".horizSlider"), horizontal: true, trigger: text.closest(".slide"), start: "left right", end: "left left", scrub: true } }); }); Remove horizontal: true gsap.utils.toArray(".slideText").forEach(text => { gsap.timeline({ defaults: {ease: "none"}, scrollTrigger: { scroller: text.closest(".horizSlider"), trigger: text.closest(".slide"), start: "left right", end: "left left", scrub: true } }) .fromTo(text, {x: 250}, {x: -250}, 0) .from(text.nextElementSibling, {scale: 0.8}, 0) }); Only ScrollTrigger.create() gsap.utils.toArray(".slideText").forEach(text => { ScrollTrigger.create({ scroller: text.closest(".horizSlider"), horizontal: true, trigger: text.closest(".slide"), start: "left right", end: "left left", scrub: true }); }); Works: Remove ScrollTrigger gsap.utils.toArray(".slideText").forEach(text => { gsap.timeline({ defaults: {ease: "none"} }) .fromTo(text, {x: 250}, {x: -250}, 0) .from(text.nextElementSibling, {scale: 0.8}, 0) }); I the last case when it works (and I can scroll down using mouse wheel) the animations are run as soon as the page is loaded. Link to comment Share on other sites More sharing options...
GreenSock Posted June 19, 2021 Share Posted June 19, 2021 Thanks for the details. Have you noticed any other ways to reproduce the issue? Neither Cassie nor I can reproduce it in Safari. Works perfectly every time. Same version as you. I wonder if it's some sort of weird thing with your mouse driver and Safari(?). What mouse are you using? Also, does it work if you remove the "scrub" option? Link to comment Share on other sites More sharing options...
Mr Baas Posted June 21, 2021 Author Share Posted June 21, 2021 I've tried three different mouses, two Logitech: Logitech MX Master 2S and Logitech MX510, and one from Dell. All have regular mouse wheels and no touchpad scroll like the Magic Mouse. Removing the scrub option doesn't make a difference. Link to comment Share on other sites More sharing options...
Thomas Günther Posted June 21, 2021 Share Posted June 21, 2021 I was able to reproduce the issue, but only with one Mouse (Razer DeathAdder V2 Mini). Here's a video I recorded: https://cln.sh/B9T9sL Using Chrome or the Magic Trackpad in Safari, I could scroll over the horizontal scroll area with no issue. I think this is a Safari bug. 2 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now