Bug: jQuery.position() after css transform gives different result on Webkit & Firefox

Bug: jQuery.position() after css transform gives different result on Webkit & Firefox

Load the following page in Firefox (3.6+ or 4.0) and Chrome/Safari


In Webkit browsers, the $box.position() take in account the css transform translate() operation, however in Firefox when we call after the css translate, the $box.position() return the same values than before the translate (even if the $box has been successfully translated)

Here is the short code to illustrate this issue (but do a view source on the above URL to see the full code) 

  1. //#box div is with css {position:absolute;top: 100px; left: 100px}
  2. var $box = $("#box");

  4. // as expected, in both browsers, $box.position() is {top:100,left:100} 

  6. //we do the css translate
  7. var transformProp = ($.browser.webkit)?"-webkit-transform":"-moz-transform";
  8. $box.css(transformProp,"translate(150px,150px)");

  10. // Webkit browsers $box.position() is  {top:250,left:250} (as expected)
  11. // but, on firefox, $box.position() is still {top:100,left:100} ;(

Note: There were some confusions in the comments about some css hooks code, but, this has nothing to do with CSS Hooks, in both case, WebKit and Firefox, the box gets translated correctly, just that on Firefox the $.position() does not take in account the translation operation. I fixed the code and created a sample HTML page (link above) that shows the issue. 

Any help greatly appreciated, the work around is pretty ugly for this one.