Jquery offset() and css transform with IE

Question

I have a div that is 'scrolls' with css-transfrom. I used jquery offset() to get the top position. This works fine in Chrome, however in internet explorer (9) the the offset does not change. I think it has something to do with the combination of the css transform and the offset function, but I don't see how to fix this. This is a small part of my code, but if I log the pos.top after each scroll it does not change in IE.

infoInnerContainer = $('.container_info')
   $window.on('scroll' , function(event) {
     var scrollDisctanceTemp = $window.scrollTop();
     var pos = infoInnerContainer.offset();
     console.log(pos.top); // does not change in IE
}

Any ideas?

Just a quick idea: CSS transformations shouldn't change the (scroll) position of elements. It could be that IE is actually do the right thing here. — RoToRa, Jul 26 '12 at 12:46

score 0 · Accepted Answer · edited May 23 '17 at 11:56

You are absolutely right. What I did is get the transform position from the style tag. And add this to the initial position of the element. That worked fine in all browsers. I got it somewhere.

I used the following code:

function matrixToArray(matrix) {
    return matrix.substr(7, matrix.length - 8).split(', ');
}

from this post:

Get the value of -webkit-transform of an element with jquery

Jquery offset() and css transform with IE

1 Answers1