Blueprint: Tooltip2/Popover2 cause infinite loop when Chrome is zoomed out to or past 75%

Created on 24 Jan 2018 · 16Comments · Source: palantir/blueprint

Bug report

__Package version(s)__: v1.x and v2.x
__Browser and OS versions__: Chrome 63, MacOS X 10.13.

Steps to reproduce

Zoom Chrome out to at least 75%
Open a Tooltip2 or Popover2

This is reproducible on the blueprint v2 docs with the "Hover and click me" button when you click it.

A quick "fix" is to disable zooming on Chrome by setting document.body.style.zoom to 1 / window.devicePixelRatio initially and every resize.

Actual behavior

Chrome freezes at 100% CPU usage with no console error.

This error is very inconsistent and appears to depend on the size of the popover/tooltip. I have a feeling this is related to Popper.js. Perhaps this issue?

core fixed bug

Source

tyscorp

All 16 comments

oh yeah total repro, straight to crash city :(
very likely this is related to that Popper.js issue https://github.com/FezVrasta/popper.js/issues/496, but i'll leave this open to redirect.

giladgray on 24 Jan 2018

FWIW, this doesn't seem to happen with my lib which uses Popper.js.

https://atomiks.github.io/tippyjs/

atomiks on 12 Mar 2018

@giladgray I just spent a long time trying to track down this bug which occurs for certain tooltips but not others. Very confusing.

It seems like it is probably a popper.js issue, but is there something blueprint can do in the meantime to make it so users don't hit this? Maybe temporarily apply the quick fix above:

A quick "fix" is to disable zooming on Chrome by setting document.body.style.zoom to 1 / window.devicePixelRatio initially and every resize.

tnrich on 12 Mar 2018

@tnrich awesome, thanks for tracking that down! a fix like you suggest certainly _does not_ belong in a library like Blueprint; it belongs in your app initialization code. we can't ban zooming across the board!

giladgray on 12 Mar 2018

@giladgray I wasn't suggesting that this be a permanent solution, but I do think having it in there until popperjs gets fixed would be a net benefit to blueprint users. Otherwise you'll have some very confusing and buggy behavior.

Or help fix popper :)

Your call of course still though.

tnrich on 12 Mar 2018

@tnrich The fix I posted above doesn't work on Retina displays on Mac.

tyscorp on 12 Mar 2018

@tnrich that's the kind of fix that belongs in your app initialization code, not as a side effect from a library import.

giladgray on 26 Mar 2018

This seems to have stopped happening for me. Anyone else not getting this anymore?

tnrich on 4 Apr 2018

🎉1

I'm not seeing it either!

giladgray on 4 Apr 2018

fixed by popper? should we close?

llorca on 4 Apr 2018

@giladgray I think we're still seeing this issue on Chrome 70, Mac OS High Sierra.

marvinsum on 19 Nov 2018

Going to close this issue, please open a new one with more details about the exact Popover/Tooltip API usage (and ideally a codesandbox repro) if you still see this.

adidahiya on 1 Dec 2018

👍1

schlosna on 23 Nov 2019

@schlosna Relating that in our case the fix proposed in https://github.com/popperjs/react-popper/pull/320 addressed the issue described here for our app which utilizes Blueprint.