Locker Service problem - jQuery offset() returning 0 values for left and top

Question

I've been trying to get the fullcalendar scheduler plugin to work with Locker Service and one of the issues I found was that the jQuery function offset() is always returning 0 for top and left.

To reproduce, I created a container div and a div element within with relative positioning.

<div class="containing">
    <div class="testClass"></div>
</div>

CSS:

.THIS.containing{
   top: 21px; 
   left: 50px;
   position: relative;
}

.THIS .testClass{
   top: 20px; 
   left: 50px;
   position: relative;

   /** giving it substance for visuals **/
   width: 100px;
   height: 10px;
   background: #000;

}

Having Locker Service activated, $('.testClass').offset() gives me Object{left:0, top: 0}. jQuery version is v2.2.4.

Is this a known issue? If so, when can we expect a fix for this?

As a workaround, I'm using the following script to calculate the offset: (modified from https://stackoverflow.com/questions/6777506/offsettop-vs-jquery-offset-top)

  var box = { top: 0, left: 0 };
  var docElem = document.documentElement;

  // BlackBerry 5, iOS 3 (original iPhone)
  if ( typeof elem.getBoundingClientRect !== "undefined" ) {
    box = elem.getBoundingClientRect();
  }

  return {
    top: box.top  + ( elem.scrollTop || docElem.scrollTop )  - ( docElem.clientTop  || 0 ),
    left: box.left + ( elem.scrollLeft || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
  }

Hope this helps anyone else having the same problem.

Answer 1

LockerService used to return a clone of the document when document.documentElement was called. This caused issues because certain values, like clientHeight, would get reset to 0 during the clone rather than keep the original value. This has been fixed now and APIs such as jQuerys offset() should function properly.

If this is still broken without the workaround let us know and we'll investigate further.