Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Remove dependency on MutationObserver

See original GitHub issue

Is your feature request related to a problem? Please describe…

As we were QA’ing our App in IE11 and Edge we noticed an incredible slowdown that rendered most of the app completely unusable.

Describe the solution you’d like

After much investigation, we noticed that most of the time was spent un MutationObserver, reevaluating CSS over and over again the same elements. We started to do some digging and found that Vue Core is not using the native IE MutationObserver due to this issue.

We ended up fixing our issue by setting window.MutationObserver = undefined, which fixed all of our rendering problemes.

While our rendering issues are now fixed, We have a few warnings in our modals and carousels. We can work around them for IE but It would be great to have a fallback solution for the domObserver that doesn’t use MutationObserver

Describe alternatives you’ve considered

We tried switching to MutationObserver polyfill, but it ended up being even slower than IE’s native solution.

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

djpatecommented, Nov 11, 2019

We figured it out. Someone was using a feature from FontAwesome that was using MutationObserver on the entire document body and never tearing it down. Removing that fixed our issue!

Sorry for the confusion.

0reactions

tmorehousecommented, Nov 7, 2019

The unfortunate thing with removing MutationObserver is that the modal will not adjust it;s centering or scroll bars properly if the content in the modal changes (i.e. display:none), or when using native features like <details> elements (which would bring back the bug that originally made us add in using MutationObserver)

Top Results From Across the Web

MutationObserver behavior after the element was removed

The behavior will depend entirely on what you mean by that. If you mean a new element with the same id is created,...

MutationObserver.disconnect() - Web APIs - MDN Web Docs

The MutationObserver method disconnect() tells the observer to stop watching for mutations. The observer can be reused by calling its observe() ...

MutationObserver observed element removal #779 - GitHub

Currently, with MutationObservers, to catch a node being removed from the DOM you have to observe the entire DOM and check every node...

Mutation observer - The Modern JavaScript Tutorial

MutationObserver is a built-in object that observes a DOM element and fires a callback when it detects a change.

JavaScript Mutation Observer - W3docs

The Mutation Observer Syntax · type: the type of mutation. · target: that's where the change happens. · addedNodes/removedNodes: the added or removed...