Draggable not working in Firefox

[knalle]

Draggable works perfectly in all browsers - except Firefox (Windows - haven't tested on Mac yet). It gives me this error:

TypeError: Argument 1 of SVGPoint.matrixTransform is not an object.

 

And then the Draggable is not working at all

 

Check it here:

http://gsap.mouret.dk/

 

Any suggestions?

[Jonathan]

Hello @knalle and Welcome to the GreenSock Forum!

 

Darggable does indeed work in Firefox. It looks like something in your code.

 

To better help you can you please setup a limited reduced codepen example so we can test your code in a live editable environment? This will be very difficult to debug and test your code with all your markup and code. Also let us know exactly what you want us to do to replicate your issue.

 

 

Thanks !

[Carl]

Yup, Jonathan is exactly right. A reduced demo will be a big help. I looked at your site in FF and it wasn't clear to me what element was supposed to be Draggable. 

 

Just fork the demo below (it already loads TweenMax and Draggable), and add just enough code to make it break in FF. We will gladly give it a look.

 

See the Pen yXMXEy by GreenSock (@GreenSock) on CodePen.

 

Thanks!

[knalle]

codepen - the snapping isn't working in the pen ... but it appears to working in firefix here. 

See the Pen PjrQjq by knalle (@knalle) on CodePen.

 

 

[knalle]

it's the area beneath the image that is supposed to be draggable (and it is working in the pen somehow)... but I cannot work out why the link I posted isn't working in FF

[Carl]

Thanks for the effort to create a demo. Being that the demo works (as I understand it) its kind of tough to use it for troubleshooting.

 

One thing I did notice is that on your site you are using an older version of Draggable, try loading in the one that ships with GSAP 1.20.2

Try updating to the latest TweenMax and Draggable

http://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js

http://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js

 

I'll see if someone else knows what a likely cause for that error is.

 

In the meantime, whatever you can do to simplify the demo (remove menu, unnecessary text and images)  and make Draggable break might be of some help.

 

[knalle]

aaaahh stupid and a bit weird error

I use the lovely ScrollMagic and while developing I use the addIndicators plugin... and every now and then I hide the indicator through CSS with:

script ~ div {display: none;}

 

Since the indicators (divs that has no IDs og classes) were added after the last <script> tag - so I though I had come up with a smart way of targetting those divs 

I had not transferred that CSS line to the Codepen, so it worked of course

 

So it works now, but I don't understand how it causes the error in Firefox (?).

 

[GreenSock]

I'm jumping in a little late here, and it appears as though you already applied a fix to that initial link so I can't quite see what the problem was, but I can say that Firefox had some known issues with throwing errors when trying to get information about SVG elements that weren't in the DOM (or had display:none). We've implemented various workarounds for that since discovering that Firefox bug, so I'm not sure if that was the culprit or not (and maybe just updating to the latest Draggable solved it for you). Anyway, I'm glad to hear you got things working now. 

 

Happy tweening (and dragging)!