MutationObserver does not get all updates

Question

I have the following code inside a chrome extension:

var observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { if (mutation.type === "childList") { Log.Debug("mutation: Childlist:"+mutation.addedNodes.length); forEach.call(mutation.addedNodes, function (addedNode) { if (addedNode.classList !== undefined) { if (addedNode.classList.contains('nja')) { Log.Debug("DOM PD:"+addedNode.classList); DoFancyStuff(addedNode); } } } }});

This happens on a site that adds content dynamically. (Google+). Everything works just perfect if the user scrolls down and just a few new elements are added.

If the user stays away from the browser for a while and clicks onto a button that causes a lot of new elements to be displayed, the MutationObserver seems to miss some nodes. I can verify this behavior inside the debug window. (A few of the added divs with the "nja"-class are written to the console, some aren't)

So for me it seems that this only works if there aren't too many divs added at once. Is there any configuration to change this behavior?

(Because this is a chrome extension I only need a solution for chrome not for any other browser)

guest · Accepted Answer · 2015-04-13 23:07:13Z

If a div with the nja class is a child of an element that gets added, this mutation observer won't see it.

For example, doing the following on a page with the mutation observer:

var added = document.createElement('section'); added.innerHTML = '<div class="nja">nested</div>'; document.body.appendChild(added);

You should see that the observer will run for the section element, but not the div.nja.

Maybe you just need to do a querySelectorAll on each added element.

Lumic · Accepted Answer · 2016-03-03 17:01:52Z

Hi guys I discovered that MutationObserver is a quite crappy when detecting text changes in [contenteditable] elements. Especially in Mac OS Safari which I use.

Accidentally I found that when I use a void SetInterval on my site, the MutationObserver works more or less as expected, even in Safari.

Below is my fiddle jsfiddle with working example. Look to the console output to see the responsivity when one change the SetInterval duration. Also try to comment out the whole SetInterval to see how crappy the observer will become.

var target = document.querySelector('#something'); console.log(target); var observer = new WebKitMutationObserver(function(mutations) { mutations.forEach(function(mutation) { var time = new Date(); console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() + "." + time.getMilliseconds()); console.log(target.innerHTML); }); }); observer.observe(target, { attributes: true, childList: true, characterData: true, subtree: true }); //observer.disconnect(); - to stop observing setInterval(function() {}, 10);

<div id="something" contenteditable>Something</div>

Collectives™ on Stack Overflow

MutationObserver does not get all updates

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related