garyw Posted January 28, 2020 Share Posted January 28, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 28, 2020 Share Posted January 28, 2020 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. Link to comment Share on other sites More sharing options...
garyw Posted January 28, 2020 Author Share Posted January 28, 2020 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). Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 28, 2020 Share Posted January 28, 2020 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! Link to comment Share on other sites More sharing options...
garyw Posted January 28, 2020 Author Share Posted January 28, 2020 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 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 28, 2020 Share Posted January 28, 2020 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). Link to comment Share on other sites More sharing options...
garyw Posted January 28, 2020 Author Share Posted January 28, 2020 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 Link to comment Share on other sites More sharing options...
garyw Posted January 28, 2020 Author Share Posted January 28, 2020 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. Link to comment Share on other sites More sharing options...
GreenSock Posted January 28, 2020 Share Posted January 28, 2020 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? Link to comment Share on other sites More sharing options...
garyw Posted January 28, 2020 Author Share Posted January 28, 2020 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. Link to comment Share on other sites More sharing options...
garyw Posted January 28, 2020 Author Share Posted January 28, 2020 https://github.com/jquery/PEP Link to comment Share on other sites More sharing options...
GreenSock Posted January 28, 2020 Share Posted January 28, 2020 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. Link to comment Share on other sites More sharing options...
garyw Posted January 28, 2020 Author Share Posted January 28, 2020 Yes, I am seeing this behavior with this codepen right now. It's Safari 11.1.2 (11605.3.8.1). Link to comment Share on other sites More sharing options...
GreenSock Posted January 28, 2020 Share Posted January 28, 2020 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? 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