How to detect CSS3 resize events

Question

The CSS3 resize property can be assigned to arbitrary elements. I'm looking for a way to detect such a resize on, say, divs (I don't mind it only working in Firefox at the moment):

div {   resize: horizontal;   overflow: hidden; } 

Unfortunately, the onresize event seems not to be fired on the div. How can I detect in JavaScript when such a user-instantiated resize has happened?

Edit: FWIW I had opened a bug report over at Mozilla. If you want to track it: https://bugzilla.mozilla.org/show_bug.cgi?id=701648

Answer 1

Resizing is like a style change. As such it can be observed with a MutationObserver. The more specific ResizeObserver is probably even better:

let observer = new ResizeObserver(function(mutations) {   console.log('mutations:', mutations); });  let child = document.querySelector('textarea'); observer.observe(child, { attributes: true });

<textarea></textarea>