How to detect resize of any element in HTML5

Issue

What should the best practices to listen on element resize event?

I want to re-position an element (jQuery dialog in my case), once it's size changed. But I am now more interested to do in a general way to to listen to resize event, unaware of how the resize happens. It suppose to be simple until I found an element can be re-sized by

• window resize
• content text changes
• children elements or their children elements resized
• a sibling element resize (e.g. a cell in a table)
• JavaScript changes it src(of img)/style attribute directly (or it's child's)
• JavaScript rewrite CSS rules or stylesheet
• native resize feature textarea or CSS3 resize
• browser's zoom or text-enlarge
• CSS transition or animations (by :hover or any other mean)

In the de-facto standard, there is a event window.onresize to subscribe resize on a window/frame. But there is no a standard event on the HTML content or DOM Elements.

I come across the following thought

• DOM Level 3 event target only on window/document type
• IE has onresize for Elements but it is IE only implementation
• MutationObserver which replace Mutation Events, but it does not fit the need of "onresize"
• naive JavaScript polling

MutationObserver is close(inner DOM changes), but it does not (yet) cross browser (IE10 does not support) and it generate noise, not CSS aware.

A naive JavaScript polling should work in all case, but it generate either delay or CPU waste of many poll.

Solution

As of July 2020, ResizeObserver is still un-official in W3C nor WhatWG but it is already supported by all major browsers since support Safari 13.1 since 2020-Mar-24.

---

FYI, there's a spec for a new ResizeObserver API. Chrome seems to be the only browser that has implemented it as of Aug 2018 (see caniuse.com), but there's at least one polyfill you can use now (which uses MutationObserver).

Answered By - Clint Harris