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.
Best Answer
LockerService used to return a clone of the document when
document.documentElement
was called. This caused issues because certain values, likeclientHeight
, would get reset to 0 during the clone rather than keep the original value. This has been fixed now and APIs such as jQuerysoffset()
should function properly.If this is still broken without the workaround let us know and we'll investigate further.