Freeze with IntersectionObserver polyfill in combination with ng-bootstrap NgbPopover

[jwillebrands]

We've found an issue when ng-bootstrap's NgbPopover is used in combination with ng-in-viewport as well as the IntersectionObserver polyfill. When the popover is opened, browsers that use the polyfill will freeze. After a lot of debugging and cursing at unresponsive browsers, I found that Angular gets stuck in an infinite change detection cycle. I've put together the following minimal reproduction: https://stackblitz.com/edit/inviewport-popover-crash

The crash should occur on any browser that depends on the IntersectionObserver polyfill (most notably IE11 and older Firefox/Chrome versions).

This seems to be caused by the MutationObserver used in the polyfill's implementation, which gets hooked by NgZone to be able to run change detection. This in turn triggers NgbPopover to determine placement for the popover, which updates classes which in turn triggers the MutationObserver again.

Now I'm not quite sure whether this is an issue with ng-in-viewport, ng-bootstrap or both, which is why I'm reporting an issue with both.

For this module, I would say it's not necessary to run the IntersectionObserver inside Angular's zone, and return to the Angular zone for the callback. I've tested this in IE, Firefox and Chrome and it does resolve the issue. I'll create a PR for these changes for you to merge if you approve.

Regards,
Jan-Willem

[k3nsei]

Fixed

[k3nsei]

@all-contributors please add @jwillebrands for bug

[allcontributors]

@k3nsei

I've put up a pull request to add @jwillebrands! 🎉