Chrome browser + mouseover from left side = tooltip not displayed

[timbowhite]

The tooltip on charts isn't (usually) displayed when the mouse hovers onto the chart from the left side w/ the latest version of Crhome. Seems to happen on maybe 75% of mouseovers from the left side of the chart.

This issue can be reproduced on both the NASDAQ/DOW charts in the header of:

http://omnipotent.net/jquery.sparkline/#s-docs

Info about the Chrome version:

https://aboutmybrowser.com/HEXvLFWH

[gwatts]

I can reproduce this on the sparklines home page in both OS X and Windows with versions of Chrome after 21, but haven't been able to create a simple standalone test that triggers it yet.

If you've had any luck reproducing it elsewhere, that would be helpful

[jledoux]

I've traced the bug down to the value of localX and localY in updateDisplay in MouseHandler in interact.js. (This problem for me in chrome occurs when coming from the left or when coming from the top whenever I have lots of sparklines defined.)

Chrome uses subpixel rendering in chrome, so the calculated offset from jquery may be non-integer. The easiest way to generate this is to zoom in using Ctrl +/- in chrome on any sparkline. This can also be generated by having non-integer calculated locations as demonstrated in this JS fiddle http://jsfiddle.net/mrFPC/9/ (e.g., forcing dividing 401 by two and building locations off of that.

The cleanest hack (with least possibility to interfere elsewhere) is to add these two lines after line 105 where localX and localY were defined:

  localX = Math.floor(localX) === -1 ? 0 : localX; // Fix issue #50 with subpixel rendering giving non-integer offset
  localY = Math.floor(localY) === -1 ? 0 : localY; 

Alternatively, you can just add 1 to localX and localY in their definitions; changing lines104-105 of interact.js to:

             localX = Math.floor(this.currentPageX - offset.left + 1),
             localY = Math.floor(this.currentPageY - offset.top + 1),

This doesn't cause an issue at the other end as the check in sp.setRegionHighlight as localX = this.currentPageX - offset.left without subpixel rendering should be between 0 and width-1; but in setRegionHighlight you fail the bounds check if its either less than 0 or greater than width.

[neverfox]

I'm experiencing this problem but it occurs when I move into the chart from the bottom only, with the charts being inside of a SlickGrid cell. This fix didn't help it. I also experience the problem on the sparklines example page, but this time when moving in from the top.

[gwatts]

Seems like this is probably a bug with Chrome... If we could create a simple jsfiddle test that didn't pull in any plugins to reproduce it, we could file a bug report

[nooss]

I've the same problem than Neverfox ; the only way to show the tooltip when coming from bottom to top is to go very fast with the mouse. Problem on chrome and Firefox (ok with IE 8!)

[gwatts]

I don't think I've ever seen it with Firefox, or even Safari and I've still been unable to reproduce it outside of the context of sparklines. It's quite odd.

[neverfox]

Any update on this problem? I about to start the next release of a project and if this is still a problem, I'll have to abandon this library for another solution, as it's now a must-fix feature for acceptance.

[0xAnakin]

I came accross this issue last night and it happens on firefox chrome and IE all latest versions. I ended up replacing these 3 lines in updateDisplay function

             offset = this.$canvas.offset(),
             localX = this.currentPageX - offset.left,
             localY = this.currentPageY - offset.top,

with

             offset2 = this.$canvas.position(),
             localX = offset2.left,
             localY = offset2.top,

[neverfox]

@syda That seems to fix the problem with the tooltips not showing, but it causes some strange side effects. No matter what you hover over, it behaves as if you're hovering over the first data point in the series. Since that's something you probably would have noticed, could there be some other change you didn't mention?

[WebFOCUSGuy]

The cleanest hack (with least possibility to interfere elsewhere) is to add these two lines after line 105 where localX and localY were defined:

 localX = Math.floor(localX) === -1 ? 0 : localX; // Fix issue #50 with subpixel rendering giving non-integer offset
 localY = Math.floor(localY) === -1 ? 0 : localY; 

Thank you jledoux. This fix worked perfectly for me. (Scenario: IE11, jQuery Sparklines v2.1.2)