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/ On Sun, Oct 5, 2014 at 10:34 AM, <[email protected]> wrote: > Hello, > > I'm trying to use Highcharts <http://www.highcharts.com/> inside a > Polymer element and I'm getting some weirdness which I can't explain. I've > set up this small snippet to exemplify > <http://jsfiddle.net/ileonte/rdh2amoj/> - 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 > <http://jsfiddle.net/ileonte/4rznn249/>. > > I have also tested with Flot <http://www.flotcharts.org/> instead of > Highcharts and it shows the exact same issue (as exemplified here > <http://jsfiddle.net/ileonte/pmedny2q/>) 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. > > 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/cf3628d1-a03b-443e-9fa5-22ea6645f18b%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/cf3628d1-a03b-443e-9fa5-22ea6645f18b%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/CAHbmOLaON_6XU3BcWWwy%2B9xM9DUGkO6-xustjtLfe%2Bo1iLd0qQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
