search

valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.53k stars 1.69k forks source link

fix(tooltip): tooltips while zoomed can cause tab to crash #3047

Open eric-simonton-sama opened 6 years ago

eric-simonton-sama commented 6 years ago

Bug description or feature request:

This was by far the strangest bug I've had to track down in a web app.

Simply mousing over to show a tooltip can cause the entire browser tab to hang given the right magic combination of circumstances, becoming unresponsive and using 100% CPU. We have seen it on Chrome (which we use exclusively), and only when using the zoom feature within the browser. This happens for both Mac and Windows users. One user also experienced the problem while using zoom within the display settings of Windows.

Plunker/StackBlitz that reproduces the issue:

Unfortunately I have not yet been able to reproduce this issue in a Plunker. I do have a link that I can share with someone privately to reproduce the issue, just let me know the best way to get that link to the right person. Perhaps over a Direct Message in Slack?

Here was my best effort at a plunker, but it does not exhibit the issue. It has all the stuff that I thought might be relevant, but I must be missing something. Maybe it is still a good starting place to experiment, though, which is why I'm still sharing the link.

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 1.9.3

Angular: 4.4.6

Bootstrap: 3.3.7 (of bootstrap-sass)

Build system: Angular CLI, System.js, webpack, starter seed:

Webpack, via the webpacker gem for rails.

IlyaSurmay commented 6 years ago

That's strange. I couldn't reproduce it in demo or plunkr, so please drop a link in DM here

eric-simonton-sama commented 6 years ago

I think I found the secret sauce to reproduce the issue. Give this plunker a try at different zoom levels, mousing over the buttons to see if they lock up the browser.

The secret was to combine tooltips with resize-observer-polyfill.

For me on Chrome it locks up at 90% and 125%, but not at 100% or 110%.

que-etc commented 6 years ago

It seems like this issue has something to do with MutationObserver and zone.js.

An updated sample (without ResizeObserver) which produces the same effect.

eric-simonton-sama commented 6 years ago

Thank you much for your investigation! Here is the same update, still without using ResizeObserver, and with some unnecessary config and code removed.

eric-simonton-sama commented 6 years ago

Interesting info was added by the zone.js team here, including a workaround that we can probably work with on our end for now: https://github.com/angular/zone.js/issues/962#issuecomment-346521952

They point out that they infinite loop goes through ngbootstrap.positionService.positionElements, so that sounds like a good place to look while continuing to troubleshoot this issue within ngx-bootstrap.

hisham commented 5 years ago

I recently upgraded to 3.3.0 and I am also running into hangs when triggering tooltip, and only in production build. I reverted to 3.2.0 and the hang seems gone now...