offset() returns incorrect value after CSS transform in WebKit

[kwantam@…]

In some (most?) cases, offset() uses getBoundingClientRect(). However, there is an inconsistency between Gecko and WebKit-based browsers in the getBoundingClientRect(); in particular, WebKit returns values with the transform applied, whereas Gecko does not apply the transform to its return value.

For example,

<div id="outside">

<section id="tContainer">

<table><tr><td>test</td></tr></table>

</section>

</div>

$('#tContainer').offset() returns some value.

However, if (e.g., in Chrome) we apply a transform such as

$('#outside').css('-webkit-transform','scale(2) translate(10px, 10px)')

then $('#tContainer').offset() returns a different value. After applying the same transform (but using '-moz-transform' instead) in FF, $('#tContainer').offset() is unchanged.

It's not particularly difficult to undo the transform when WebKit is detected. It seems to me this would be more useful behavior.

[kwantam@…]

Seems my search-fu was a bit weak. #8362 is the same issue. Apologies for the duplicate.

As penance, here's a quick way to actually undo the transform that WebKit applies (continuing the above example):

var halfWidth = $('#outside').width()/2;

var halfHeight = $('#outside').height()/2;

var elm = $('tContainer');

var pTrans = buffer.css('-webkit-transform').split(',').map(parseFloat);

var absXoff = halfWidth - (halfWidth - elm.offset().left + pTrans[4])/pTrans[3];

var absYoff = halfHeight- (halfHeight - elm.offset().top + pTrans[5])/pTrans[3];

This only works if you've applied the same scale to X and Y (in which case the transform matrix is [scale,0;0,scale]). Handling an arbitrary transform matrix is less straightforward.

[timmywil]

Duplicate of #8362.