Try this algorithm for the patch:
jQuery.fn.offset = function() { if ( !this.length ) return undefined;
var el = this[0]; // getBoundingClientRect return value is read-only var
box = el.getBoundingClientRect(); // we need a mutable version var off =
{left: box.left, top: box.top}; // remove scroll offsets while (el) { var
host = el.parentNode || el.host; if (host && host.nodeType === 1) {
off.left += host.scrollLeft; off.top += host.scrollTop; } el = host; }
return off; };
Scott
On Sun, Oct 5, 2014 at 10:13 PM, <[email protected]> wrote:
> Hello Scott,
>
> Thank you very much for taking the time to look over my samples.
>
> You were correct in your assumption that the problem was jQuery-related -
> jQuery().offset() returns element positions relative to the nearest
> shadow-root instead of the document. Based on this observation I've come up
> with a tentative fix
> <http://ileonte.github.io/polymer-chart-test/demo/jquery.offset.fix.js> (you
> can see it in action in my new Highcharts
> <http://ileonte.github.io/polymer-chart-test/demo/test-hc.html> and Flot
> <http://ileonte.github.io/polymer-chart-test/demo/test-flot.html> tests).
> You'll note that there are two variants of my attempted solution:
>
> - the 'simple' version does nothing more than
> use HTMLElement.offsetLeft and HTMLElement.offsetTop without any further
> processing. This version seems to work in all cases for the Highcharts test
> but works incorrectly in the Flot test
> - the alternative ('complex') version walks up the tree and computes
> the final position by adding the relative position of each shadow-root host
> found along the way to the relative position of the element. This version
> seems to work for both Highcharts and Flot in the simple case (where my
> custom chart element is used outside any shadow-root) but fails in both
> cases when using deep nesting of one or more custom elements
>
> I would greatly appreciate any further suggestions you may have as to what
> I might try next.
>
> On Sunday, October 5, 2014 10:44:27 PM UTC+3, Scott Miles wrote:
>
>> I believe the problem is related to those libraries not being shadow-root
>> aware.
>>
>> They are doing some coordinate calculation via tree-walking which is
>> confounded by the shadow-boundary. In particular, the offset in your
>> jsfiddle is equivalent to the margin size on body, suggesting the
>> tree-walking code never reached body to account for that value. Maybe this
>> is rooted in JQuery.
>>
>> Your fiddle recast to compare chart in shadow-root to chart not in
>> shadow-root.
>>
>> http://jsfiddle.net/bw9rkbsj/
>>
> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups
> "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/b60b323f-02c6-4a34-b147-a809d1c32857%40googlegroups.com
> <https://groups.google.com/d/msgid/polymer-dev/b60b323f-02c6-4a34-b147-a809d1c32857%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>
> For more options, visit https://groups.google.com/d/optout.
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CAHbmOLb%3DDY3hjtyus3SwUGkNondDr9BRNv2E3E8Sdf1WpGqCMw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
