Observer onDragStart stopped working in Safari after updating to GSAP 3.13.0

[call007]

Hi GSAP team,

 

After upgrading GSAP from 3.12.5 to 3.13.0, I noticed that the onDragStart callback in Observer no longer works reliably in Safari (Version 18.5 – 20621.2.5.11.8).

 

Here’s a simple demo reproducing the issue:

🔗 StackBlitz Demo

 

In this demo, when trying to drag the box, the onDragStart log is almost never triggered in Safari. It works fine in other browsers like Chrome and Firefox.

 

Is this a bug introduced in 3.13.0, or was there a breaking change to Observer behavior?

 

Let me know if I can provide any more information.

 

Thanks!

[GreenSock]

Hm, I doubt it's a regression in Observer 3.13.0. I just tested in Safari 17.5 and it works perfectly every time. My guess is that it's a Safari 18.5 issue, but I'm upgrading now to see. Are you saying that if you roll back to Observer 3.12.5 the issue vanishes even in Safari 18.5?

[call007]

2 minutes ago, GreenSock said:

Hm, I doubt it's a regression in Observer 3.13.0. I just tested in Safari 17.5 and it works perfectly every time. My guess is that it's a Safari 18.5 issue, but I'm upgrading now to see. Are you saying that if you roll back to Observer 3.12.5 the issue vanishes even in Safari 18.5?

I'm not sure about Observer 3.12.5, but when I rolled back to GSAP 3.12.5 the issue disappears in Safari 18.5

[GreenSock]

Does it also go away if you roll back to GSAP 3.12.7?

[call007]

5 minutes ago, GreenSock said:

Does it also go away if you roll back to GSAP 3.12.7?

Nope. GSAP 3.12.7 has the same issue. I've just checked

[Rodrigo]

Hi,

 

I just tested your Stackblitz demo on Safari 18.5 on Mac (Sequoia 15.5) and I can see the console log for the onDragStart callback 🤷‍♂️

 

I'll create a simple React app locally and test on it as well.

[call007]

2 minutes ago, Rodrigo said:

Hi,

 

I just tested your Stackblitz demo on Safari 18.5 on Mac (Sequoia 15.5) and I can see the console log for the onDragStart callback 🤷‍♂️

 

I'll create a simple React app locally and test on it as well.

It's strange, because I also have MacOS (Sequoia 15.5) and Safari 18.5. I can show you the video if that would help

[GreenSock]

Super strange indeed. Might you have some kind of browser or OS plugins that might be interfering? 

[call007]

11 minutes ago, GreenSock said:

Super strange indeed. Might you have some kind of browser or OS plugins that might be interfering? 

Safari isn’t my primary browser, and I don’t really use it, so I haven’t installed any plugins or extensions there. However, I noticed that the onDragStart method triggers much more easily when using the trackpad (though not always) compared to an external mouse (not an Apple mouse).

[Rodrigo]

Here is a recording of a simple app created with Vite that shows the callback is actually triggering:

https://i.imgur.com/q4Qh8Lz.mp4

[call007]

I’d also like to point out that my colleague, who has the same MacBook Pro 16” with an M1 chip, is experiencing the same issue

[Rodrigo]

I tried the same demo on my macbook (14" with M2 chip) with two different mouses (none of them a mac mouse) and the trackpad and it works without any problems. Just in case here is the code of the demo I created locally:

import gsap from "gsap";
import { Observer } from "gsap/Observer";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(Observer);

function App() {
  useGSAP(() => {
    Observer.create({
      target: ".box",
      type: "pointer, mouse",
      onDragStart: () => {
        console.log("DragStart", Date.now());
      },
    })
  });

  return (
    <div className="wrapper">
      <div className="box">Box</div>
    </div>
  )
}

export default App

Styles are extremely simple:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
  width: 100%;
  height: 100vh;
  background-color: #fffedd;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #057a05;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  font-size: 24px;
  cursor: grab;
  color: white;
}

Maybe your project was created with an earlier version of GSAP and perhaps you used your private token (back in the days where we had different paid tiers) to install GSAP. Maybe try removing GSAP and @gsap/react, then delete your lock file and then install GSAP and @gsap/react again in order to see if that works. Other that something interfering with GSAP/Observer I can't really think of a reason for this issue 🤔

[GreenSock]

57 minutes ago, call007 said:

Nope. GSAP 3.12.7 has the same issue. I've just checked

Does everything else work as expected except the onDragStart() callback? It's not as if your mouse press/move isn't being recognized at all, right? For example, onPress, onDrag, onMove, onRelease, etc. fires for you? 

[call007]

I tried to reproduce your demo and recorded a video — attaching it here. In the first part, I’m using version 3.12.5, and then I switch to 3.12.7, where the issue described in this thread starts to appear.

 

https://stackblitz.com/edit/gsap-react-basic-f48716-yurgt58q?file=src%2FApp.js,package.json,src%2Fgsap-brand.css

[call007]

onPress, onDrag, onMove, and onRelease all work as expected on GSAP 3.12.5 and 3.12.7

[call007]

> Maybe try removing GSAP and @gsap/react, then delete your lock file and then install GSAP and @gsap/react again in order to see if that works.

 

I’ve tried that locally on a real project, but it didn’t help

[Rodrigo]

Hi,

 

I tried your latest demo on Safari with three different versions of GSAP (3.12.5, 3.12.7 and 3.13.0) and I see the log in the console on all three versions in safari 18.5. Unfortunately I'm not able to replicate the issue neither in development/production on my macbook or in stackblitz 😞

[GreenSock]

Two questions: 

1. Does the problem vanish if you set debounce: false? 
2. Does this updated Observer.min.js file work correctly for you?: https://assets.codepen.io/16327/Observer.min.js 

I have a theory about an odd behavior Safari might be doing that I worked around in that file above. 

 

Here's a CodePen demo with the new file in place. You can swap it out for the old one (https://unpkg.com/gsap/dist/Observer.min.js) to see if there's a difference: 

See the Pen dPYGYoo?editors=0010 by GreenSock (@GreenSock) on CodePen.

[call007]

Yes, when I set debounce: false, the issue disappears (It also helps in the real project). And in the CodePen demo you shared, the trigger works perfectly, just as expected!

[call007]

When I replaced the Observer script in the CodePen demo with https://unpkg.com/gsap/dist/Observer.min.js, the issue came back

[GreenSock]

Super. It sounds like my suspicion was correct and it had to do with Safari firing multiple events in quick succession in a way that other browsers didn't, but as you can see I've worked around the issue in the next release. Sorry about any hassle there - you can simply set debounce: false for now. 

[call007]

3 minutes ago, GreenSock said:

Super. It sounds like my suspicion was correct and it had to do with Safari firing multiple events in quick succession in a way that other browsers didn't, but as you can see I've worked around the issue in the next release. Sorry about any hassle there - you can simply set debounce: false for now. 

Thank you very much for the prompt resolution of the issue! We’re looking forward to the release! Good luck!