Jump to content
Search Community

Draggable - .css('transform') returning different values in IE than Chrome/Firefox

Sky test
Moderator Tag

Go to solution Solved by GreenSock,

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

Hi all! I'm having a bit of a weird situation.


I'm creating a fake scrollbar with Draggable that moves its target's scrollTop position as the scrollbar moves. I've got this working like a charm, except for one hiccup... IE is returning different values for the scrollbar's transform CSS value than Chrome/Firefox are.


For example, Chrome/Firefox are returning something like matrix(1, 0, 0, 1, 0, 5), while IE is returning matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 5, 0, 1).


In order to get my scrollbar contraption to work, I need to listen for/get the Y value of the scrollbar's transform property and respectively set the target div's scrollTop position through a formula using that same Y value.


This is proving to be a bit tricky as I need to parse and return different positions for IE (position 13) and Chrome/Firefox (position 5).


I suppose my question is this: could someone shed some light onto why IE is returning a matrix3d value while Chrome/Firefox are returning just a regular matrix value for the draggable?


Right now I'm using some browser sniffing to get it all to work, but I'd really rather not if I don't have to.


Please let me know if setting up a Codepen would help better illustrate this situation.



Link to comment
Share on other sites

  • Solution

If you're using GSAP to do the y-translation anyway, it'd be a lot easier to just tap into the _gsTransform on the element, like:


That's where the values are cached.


And if you're trying to figure out the y position of the Draggable's target, did you know that the Draggable instance has a "y" property as well? So you could just tap into that. Example:

Draggable.create("#id", {
  onDrag:function() {

Does that help at all?

  • Like 4
Link to comment
Share on other sites

Also if the jQuery css() method is reporting the wrong values in different browsers then it looks like a jQuery bug, and should be reported to jQuery bug tracker. The jQuery css() method is known to be really buggy when it comes to setting and getting CSS transform values cross browser.


But like Jack advised using GSAP to get the values will be more accurate cross browser.

  • Like 2
Link to comment
Share on other sites

Jack, your 2nd solution worked perfectly! I had no idea that was possible... does GSAP even have any limitations? Because it doesn't seem like it does :)


Jonathan, thank you for asking. I was actually talking specifically about Edge, but the issue was consistent within Edge and IE10. I'll also look into reporting this as a bug to the jQuery tracker, great advice.


Thank you both so much for your help!!

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