Highlighting does not work properly in Firefox with "transform: translate()" style

[flipsa]

First of all: thanks for this great plugin!

I'm using it on this site I am working on. The site itself consists almost entirely of a leaflet map (http://leafletjs.com) that displays data from environmental sensors (air pollution, etc) in Germany.

I show the graphs within the marker popups which open on click. This works perfectly in Chrome (Win / Linux) and IExplorer, but in Firefox (Win / Linux), I cannot properly interact / highlight values by hovering with the mouse over the graph. To be precise: no matter where the mouse is, the highlight shows only the latest value / point in time). I haven't checked on MacOS/iOS in a while, so I can't say if this is also a problem there (and for which browsers, but I think it used to at least affect Firefox in the same way).

Demo / Reproduce:

• open Firefox (Win or Linux) and go to my site: http://bit.ly/1tUS2DB
• In the input field at the top right hand side enter "Berlin" (or any other place in Germany) and click "Suche"
• click on any of the markers (except the dark blue ones, they currently have empty graphs)
• in the marker popup, try highlighting / interacting with the graph (with your mouse; touch devices are another issue...)
• notice that only the most recent date / value is highlighed, no matter where your mouse pointer is
• (compare with Chrome or IExplorer, where everything is fine)

I have tried playing with css position, width, height, z-index (and more) of the graph and parent elements, but could not work out what the problem really is...

A bit more info, which makes this even weirder: when I enable "highlightSeriesOpts" (currently disabled again), I could highlight more values (3 most recent), but there is a large offset between the actual mouse position and the highlighted date / value, which makes me think it might be somehow related to this old / closed issue: https://code.google.com/p/dygraphs/issues/detail?id=153

Another thing I noticed (before I switched to use the range selector / slider): click and drag to zoom in on an area in the graph did not work at all on any browser / OS.

All in all I guess, something about the way leaflet popups work is not playing nicely with dygraphs mouse events :(

Any help would be highly appreciated!

[danvk]

I can reproduce this, but I see a ton of warning in the Firefox console:

One problem is that you're specifying "labels" when your CSV file also has labels in the top row. The warnings also indicate that your data isn't sorted. Try fixing both of those and let me know if you still see the problem.

[flipsa]

I took care of both the warnings, but my original problem persists.

[danvk]

Shucks! It would be helpful to get a more minimal failing example, e.g. via http://dygraphs.com/fiddle or http://dygraphs.com/jsbin.

[flipsa]

This is as minimal as it gets: http://jsfiddle.net/eM2Mg/5004/

There's a large offset to the right for me on Firefox, but not on Chrome or IExplorer.

[danvk]

I suspect this is the problem:

The leaflet popup is being positioned using a combination of bottom, left and transform that doesn't seem to work w/ dygraphs on Firefox.

[danvk]

Yep, that's it. Here's an even more minimal case: http://jsfiddle.net/eM2Mg/5007/

[flipsa]

Just FYI: in your fiddle, while highlighting does work in Chrome and IE, translate() also breaks zooming in for me in Chrome and IE. It shows the same offset problem now. Try click and drag to zoom in and notice that the zoomed in area is off to the right by the amount of pixel set in translate.

[flipsa]

@danvk just checking in after some time to ask if this is something you are eventually gonna look into fixing. Unfortunately my skills aren't good enough to contribute a working solution for this myself (after looking at the source a while ago).

Dygraphs is awesome and would be perfect for my project, if only this (i.e. leaflet popus + interactive dygraphs) would work in major browsers and cross-platform.

[danvk]

Sorry, I haven't had a chance to investigate this further.