Menu
I have a DIV with style resize: both and then I set a MutationObserver that listens for changes in attributes.
mutObs = new MutationObserver(function () {
console.log('Hello');
});
elem = document.getElementById('aDiv');
mutObs.observe(elem, {
attributes: true
});
elem.style.width = '300px'; //this fires the observer callback as expected
I made a fiddle: http://jsfiddle.net/2NQQu/2/
In Chrome (I tested Chrome 31) the callback is not fired when you resize the DIV with the mouse. In Firefox it works fine.
Is this behavior intentional and/or standard? Is it a bug?
337
MutationObserver is a Web API provided by modern browsers for detecting changes in the DOM. With this API one can listen to newly added or removed nodes, attribute changes or changes in the text content of text nodes.
Resize Observer is a new JavaScript API that's very similar to other observer APIs like the Intersection Observer API. It allows for elements to be notified when their size changes.
This is done by setting the characterData property to true in the options object. Here's the code: let options = { characterData: true }, observer = new MutationObserver(mCallback); function mCallback(mutations) { for (let mutation of mutations) { if (mutation. type === 'characterData') { // Do something here... } } }
It is a bug in Chrome, reported here. The bug is still open, which means it has not been fixed.
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
