How to detect CSS3 resize events

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>

Listen to DOMAttrModified events. Got the idea from this answer, this jsFiddle appears to work in Firefox 8 (if you open the console).

Since the resize event clearly doesn't work (currently, at least), you can try one of these alternative options:

1. Use a combination of mousedown, mousemove and/or mouseup to tell whether the div is being / has been resized. If you want really fine-grained control you can check in every mousemove event how much / if the div has been resized. If you don't need that, you can simply not use mousemove at all and just measure the div in mousedown and mouseup and figure out if it was resized in the latter.
2. Poll every 200ms or so (depending on your needs) and compare the current size with the last known size. See setTimeout().

You can use the ResizeSensor class of the css-element-queries polyfill from

https://github.com/marcj/css-element-queries

It allows you to call a javascript function on size changes for all types of elements, not only for window. It sets up a real sensor, not a javascript setTimeout poll.

Use it like this:

new ResizeSensor($('#myelement'), function() {
    console.log("myelement's size has changed");
});

Supported browsers are: all incl. IE6+.