Tooltip position appears offset from mouse cursor

[cobyism]

Cool project! Just saw your demo page, and it looks like there’s a bug with the positioning of tooltips relative to where the mouse cursor is:

This was in Google Chrome Stable (Version 30.0.1599.69) on OS X.

[jondavidjohn]

Interesting... Do you happen to be on a HiDPI (retina) display?

I've got code to attempt to handle the rendering crisp on HiDPI, but I suspect the scaling dimensions throws off the reported cursor position. Don't have any equipment to test the HiDPI interactivity currently 😕

[cobyism]

Ah yes, I’m on a retina MBP—that’d explain it. 👍

[jondavidjohn]

@cobyism On an unrelated note, how did you generate those gifs? Seems like an really great way to demonstrate things.

[cobyism]

@jondavidjohn I record using QuickTime’s built-in screen recording functionality, and then use an app called GIF Brewery to edit the recorded movie into a GIF as I want it (cropping, length, annotations, speed, framerate vs. colour depth vs. size and so forth). We use that combination for most of the GIFs we post to the GitHub.com blog when we announce new features we want to illustrate, and it works pretty well for us! 😃

[jondavidjohn]

This bug likely lies somewhere in this section

https://github.com/jondavidjohn/bubblechart/blob/master/src/classes/BubbleChart/Pointer.coffee#L43-L70

I attempted to account for retina displays, but like I said, I don't really have the equipment handy to test/debug it thoroughly.

[cobyism]

Just found a possibly relevant excerpt of this article:

Implementation Differences

On a HiDPI device such as a Macbook Pro with Retina display, Safari 6 carries a webkitBackingStorePixelRatio value of 2 and a devicePixelRatio of 2 whereas Chrome uses a webkitBackingStorePixelRatio value of 1 and a devicePixelRatio of 2.

It goes on to explain about blurry rendering in chrome because of the way it scales things back up for display, another symptom I notice when I view this in Chrome—and then even has some example code for computing the correct backing storage ratio:

var ...

// finally query the various pixel ratios
devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio = context.webkitBackingStorePixelRatio ||
                            context.mozBackingStorePixelRatio ||
                            context.msBackingStorePixelRatio ||
                            context.oBackingStorePixelRatio ||
                            context.backingStorePixelRatio || 1,
ratio = devicePixelRatio / backingStoreRatio;

Which might be how you need to adjust things at this line to get it to work 😄 Sorry I don’t have more time right now to have a crack at debugging this for you on my screen, but hopefully that article might lead you work out a solution without needing a retina screen.

[jondavidjohn]

Thanks for the detective work in any case. I'll give this a run tonight and hijack a co-workers Retina MBP tomorrow when they aren't looking. 😉

Cheers!

[cobyism]

🤘

[jondavidjohn]

Hah, thanks. I've updated the project page to use the new code, seems to be working fine.

[cobyism]

Awesome, yeah the tooltip thing is completely fixed when viewed on my retina here. 👍

Possibly related, are these images meant to be so small inside the circles?

Looking at this compared to my GIFs at the top of this thread, it would seem that a side effect of your changes means that they’re all getting displayed at the same size. Is this intended?

[jondavidjohn]

In taking a more robust and complete run at retina support I decided that unless explicit @2x images are provided (meaning we'll shrink them by 2 always). It'll prefer small clear images to full size and fuzzy. So if retina, it shrinks the images down to maintain the clarity.

[cobyism]

🆒 Sounds like a good way of handling it!