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

[Sky]

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.

 

Thanks!

[GreenSock]

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:

yourElement._gsTransform.y;

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() {
        console.log(this.y);
  }
});

Does that help at all?

[Jonathan]

Hello

• Which IE are you talking about IE10 or IE11?
• Or do you mean Microsoft new browser MS Edge which is only available on Windows 10?

[Jonathan]

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.

[Sky]

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