MutationObserver: incoherent behavior when subtree parameter is set
Reported by
te...@free.fr,
Dec 14 2016
|
||
Issue descriptionUserAgent: 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
,
Dec 14 2016
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 |
||
Comment 1 by ajha@chromium.org
, Dec 14 2016