Polymer + Highcharts/Flot = some weird stuff

[ionut....@gmail.com]

Hello,

I'm trying to use Highcharts inside a Polymer element and I'm getting some weirdness which I can't explain. I've set up this small snippet to exemplify - note how the vertical line tracking the mouse cursor is offset to the right for the chart created inside the Polymer element (top) when compared to the 'regular' chart created on a plain <div> (bottom). This issue manifests itself even more strongly if I have two or more of my custom elements inside a 'horizontal layout' flex container as exemplified here.

I have also tested with Flot instead of Highcharts and it shows the exact same issue (as exemplified here) so either Flot and Highcharts both have the exact same quirk or Polymer somehow messes with them.

Any tips on how to alleviate this problem would be greatly appreciated.

Ionuț

PS: all of my sample snippets were tested in Chrome (38.0.2125.101 beta-m) as well as Internet Explorer 11.

[Scott Miles]

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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/cf3628d1-a03b-443e-9fa5-22ea6645f18b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[ionut....@gmail.com]

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 (you can see it in action in my new Highcharts and Flot 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:

[Scott Miles]

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

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 polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/b60b323f-02c6-4a34-b147-a809d1c32857%40googlegroups.com.

[ionut....@gmail.com]

Hello Scott,

Thank you very much for the suggestion, it works perfectly for both of my tests. I have updated the test GitHub repo for anyone else who might be interested in seeing the 'final' version.

Again, thank you for taking the time to look over my samples. Have a nice day :)