New issue
Advanced search Search tips

Issue 674243 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner:
Closed: Dec 2016
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

MutationObserver: incoherent behavior when subtree parameter is set

Reported by te...@free.fr, Dec 14 2016

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

Steps to reproduce the problem:
1. Open https://jsfiddle.net/wLo45b2q/
2. Check the messages in the console (F12)

What is the expected behavior?
The children of the added node should not be part of the DOM tree when the mutation event for that node is sent if new mutation events will also be sent for these children.

The console messages should look like:
Node added DIV (with 1 children)
Node added SCRIPT (with 0 children)
Adding subtree
Node added DIV (with 1 children)

Or maybe like:
Node added DIV (with 0 children)
Node added A (with 0 children)
Node added IMG (with 0 children)
Node added SCRIPT (with 0 children)
Adding subtree
Node added DIV (with 1 children)

But not what it is now:
Node added DIV (with 1 children)
Node added A (with 1 children)
Node added IMG (with 0 children)
Node added SCRIPT (with 0 children)
Adding subtree
Node added DIV (with 1 children)

What went wrong?
When parsing the page HTML code, the observer callback is called for every element added. For instance, if the initial HTML code contains the following:
  <div><a><img></a></div>
the callback will be called for the DIV element, then for the A element and finally for the IMG, *but* when called for the DIV element, the A and IMG elements will already be part of the DOM tree.

When new elements are added using JS, the observer callback is only called for root nodes added. For instance, when adding the following DOM subtree with JS:
  <div><a><img></a></div>
the callback will be called for the DIV element, *but* never for the A or IMG element it contains.

This is a problem, because in the first case, you only have to process the added node passed to the callback, while in the second case, you have to process both the added node and its children ... but if you do that in the first case, you will process nodes multiple times as the callback will be called later for the children too. And there is no way to distinguish between these 2 cases in the callback.

Did this work before? No 

Does this work in other browsers? No
 Same behavior with Firefox 50.1.0 and Edge 38.14393.0.0.

Chrome version: 55.0.2883.87  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 24.0 r0
 

Comment 1 by ajha@chromium.org, Dec 14 2016

Labels: M-55 prestable-55.0.2883.87

Comment 2 by tkent@chromium.org, Dec 14 2016

Components: Blink>DOM
Owner: tkent@chromium.org
Status: WontFix (was: Unconfirmed)
This is because mutation callback is called asynchronously.  MutationRecords are created for DOM operations synchronously, but when the callback is called, other DOM operations might be done.  So node.childElementCount in your code returns the final state instead of the state on DOM mutation.

Sign in to add a comment