Jump to content
Search Community

ScrollTrigger with horizontal: true - Safari mouse wheel vertical scroll bug?

Mr Baas test
Moderator Tag

Recommended Posts

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

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

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

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

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...