Search code examples
javascriptjquerycssmatrixgsap

jQuery - .css('transform') returning different values in Internet Explorer than Chrome/Firefox


As a bit of background, I'm using Greensock's Draggable to move an object on the y-axis with the transform:translate3d property.

However, when I call for a return on the moving object with .css('transform'), the values returned in IE are different than what Chrome/Firefox are returning.

For example, Chrome/Firefox return matrix(1, 0, 0, 1, 0, 5) while IE returns matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 5, 0, 1).

I need to parse and grab the changing y-value, which is position [5] within Chrome/Firefox and position [13] within IE. This is obviously proving to be an issue without implementing some browser sniffing.

Is there a way for me to either standardize the property value that is returned (either to matrix or matrix3d), or maybe grab the y-value on its own in a different way?

Edit: Not sure why my question received a negative rating; if I'm not providing enough information, let me know.


Solution

  • In case anyone else ever has this issue and is using Greensock (GSAP), I was supplied with the following answer over at the Greensock forums:

    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);
        }
    });
    

    Another answer suggested that the different values could be the result of a bug within jQuery's .css('transform').

    Either way, this solved my issue.