Draggable errors in OSX Safari

[garyw]

Here is the code we are using to initialize a horizontal dragger:

 

        this.dragger = Draggable.create(this.thumb, {
            bounds:         this.thumbContainer,
            cursor:            'pointer',
            type:            'x',
            zIndexBoost:    false,
            onDrag:            onDragHandler,
            callbackScope:    this,
            liveSnap:        {
                x: function(value) { return Math.round(value); }
            }
        })[0];

 

When we attempt to drag the item using OSX Safari 9.1.2, we get the following errors:

 

Invalid property (4)  K - gsap.min.js:10:826

* "touchAction"

* "set to"

* pan-y"

* "Missing plugin? gsap.registerPlugin"

 

This code works on all other browsers that we've tested.

[ZachSaucier]

Hey Gary,

 

I can't reproduce this error using the minimal demo below (in Catalina at least). Can you test and see if the error occurs for you with this demo?

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

 

If it works fine, please try to recreate the error using a minimal demo for us to test.

 

Also, noting the GSAP version that you're using would be helpful.

[garyw]

Yes, this CodePen works.  Part of the issue is that we're including a PointerEvent polyfill (PEP.js). When I remove it, the dragging works, but I still get the error messages. The other part of the issue is probably that Safari needs to be updated.... which I cannot do on this particular machine (gotta love Apple...not).

[ZachSaucier]

If you can create a minimal demo of the issue we'd love to test ourselves and try to figure out if there's anything we can do!

[garyw]

Here's a CodePen that demonstrates the errors in the console. I managed to update Safari to 11 and the errors still appear.

 

See the Pen OJPYyNo by og-elmonty (@og-elmonty) on CodePen

 

[ZachSaucier]

6 minutes ago, garyw said:

Here's a CodePen that demonstrates the errors in the console.

Great! Thanks so much.

 

6 minutes ago, garyw said:

I managed to update Safari to 11 and the errors still appear.

Can you try using GSAP version 3.1.1 (and updating the other relevant plugins to match) and see if that fixes it? You can do that by clicking the cog next to "JS" and updating each field. I kinda doubt it will fix it, but we want to make sure.

 

It might take us some time to be able to spin up an OSX environment the more you're able to debug the more quickly we can get a fix out (if possible).

[garyw]

Okay, I updated the pen. I still see the error:

Invalid property - "touchAction" - "set to" - "pan-y" - "Missing plugin? gsap.registerPlugin" init:CSSPlugin.js:991

[garyw]

I moved pep.js to the top of the JS list in the pen and now the dragger doesn't move at all in Safari.

[GreenSock]

6 minutes ago, garyw said:

Okay, I updated the pen. I still see the error:

Invalid property - "touchAction" - "set to" - "pan-y" - "Missing plugin? gsap.registerPlugin" init:CSSPlugin.js:991

 are you saying that something actually breaks? Or are you just saying that you see the warning message in the console and it has you worried? That warning just means that the Draggable's target doesn't have the property "touchAction" (because Safari doesn't support it.) but that's not necessarily a problem. 

 

1 minute ago, garyw said:

I moved pep.js to the top of the JS list in the pen and now the dragger doesn't move at all in Safari.

I've never heard of pep.js and we can't really support 3rd party tools like that. I guess my advice would be not to move it above Draggable then I'm curious why you feel the need to load pep.js? 

[garyw]

We use pep.js because we have many types of interactivity in our web app and it needs to work on multiple browsers and devices with and without touch capabilities. It allows us to standardize on one type of input event (PointerEvent) on any browser. 

 

In the pen, if I move pep.js above GSDevTools3.min.js, the draggable does not work. If I move pep.js anywhere below that, the draggable works.

 

In my web app, the only GSAP files I have are gsap.min.js and Draggable.min.js. Even if I move pep.js below them, the draggable doesn't work.

[garyw]

https://github.com/jquery/PEP

 

[GreenSock]

I can't seem to reproduce that in codepen. I'm testing in the latest Safari and things work no matter what order I load them in. Are you able to reproduce the problem using the codepen you provided above? Any other tricks to be able to reproduce that? 

 

It sure sounds like pep.js is interfering with something. Draggable already has a bunch of workarounds baked-in for various browser bugs and inconsistencies, so I wonder if pep.js is actually stepping on its toes somehow. 

[garyw]

Yes, I am seeing this behavior with this codepen right now. It's Safari 11.1.2 (11605.3.8.1).

 

[GreenSock]

Sorry, but we don't have the resources to troubleshoot a 3rd party tool that's interfering with Draggable in a browser that's 4 years old (but works fine in modern-day versions). When you load in in a certain order, you said it works fine, though, right?