Jump to content
Search Community

Draggable not working in Firefox

knalle test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 ! :)

  • Like 4
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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.

 

  • Like 3
Link to comment
Share on other sites

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 :D


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 (?).

 

  • Like 1
Link to comment
Share on other sites

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)!

  • Like 1
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...