Tooltip with hover trigger not working on page with scrollbar

[b0hdy]

Describe the bug
When mouse enters trigger element and page has vertical scrollbar and his position is not at top of page then tooltip is flickering and does not remain visible. Problem is probably with function mouseOutsideRect and comparing mouse and trigger position: (pageY || clientY) < Math.floor(top) || (pageY || clientY) > Math.ceil(bottom).

To Reproduce
Steps to reproduce the behavior:
https://codesandbox.io/s/white-leaf-094it?file=/src/index.js
https://user-images.githubusercontent.com/18634735/108426708-613e2900-723c-11eb-924b-b7b9096d97dc.mov

Expected behavior
Tooltip should remain visible after hover button.

Desktop (please complete the following information):

• OS: macOS
• Browser chrome
• Version 88

[mohsinulhaq]

@czabaj I think using pageX instead of clientX might solve this? Not sure, can you check?

[b0hdy]

I found another bug with hover on trigger element, the problem is only in Chrome (FF and Safari works properly). When mouse enters trigger element from the top of the element then tooltip is flickering again. Property mouseEvent.clientY in mouseOutsideRect strangely returns mouse position about 1px less than a tooltipRect.top.

Code: https://codesandbox.io/s/objective-volhard-7hktp?file=/src/index.js
Demo: https://user-images.githubusercontent.com/18634735/108590190-73b28280-7362-11eb-8fa1-7ba8de80392c.mov

[mohsinulhaq]

@czabaj can you check this case with your fix?

[czabaj]

@mohsinulhaq just checked it and this problem appears with top and left properties, decreasing both by 1 pixel during comparison is a quick fix. But I don't know why this happens 😕

[mohsinulhaq]

wow, pretty weird, let me check it out as well

[mohsinulhaq]

https://codesandbox.io/s/serene-voice-7cbco?file=/src/index.js
Chrome: 7px and 8px
Firefox: 9.6px and 10px
Safari: 10px and 10px
🤷‍♂️

[czabaj]

@mohsinulhaq forked your test and re-tested https://codesandbox.io/s/sharp-zhukovsky-g65qm?file=/src/index.js

Both Firefox and Safari suffer from the rounding error originating from the fact, that DOMRect supports fractional pixels but MouseEvent not (although it seems that it shall support fractional pixels too), but only Chrome reports whole integer difference.

Does that sound like a bug in chromium? Meantime, we could exceed the DOMRect by 1 pixel to fix this issue, OK?

[czabaj]

I created an issue in the chromium issue tracker https://bugs.chromium.org/p/chromium/issues/detail?id=1180746

[mohsinulhaq]

@czabaj thanks for filing it, I was thinking the same, but I thought first I would consult StackOverflow.
But there was no reply, so I guess, no problem.

Btw, shouldn't we add/subtract 1 only for Chrome?

[czabaj]

@mohsinulhaq I would rather not exceed the DOMRect conditionally, it will increase the complexity, I'm not aware of any way how to test the browser vendor reliably and easily, and increasing the DOMRect by 1 pixel will only cause the Tooltip to hide after the mouse leaves "the Trigger and 1 pixel" which is negligible IMHO.

[mohsinulhaq]

hmmm makes sense 👍

[mohsinulhaq]

somehow, merging the PR auto-closed this issue

[mohsinulhaq]

@b0hdy please try out v4.1.1 and let us know if it fixed your issue.

[b0hdy]

@mohsinulhaq works well, thank you.