Is there any non-polling way to detect when a DOM element's size or position have changed?

Question

For a long time, I\'ve been looking for a way to detect when a DOM element\'s size or position has changed. It could be because the window resized, or because new child elements

Answer 1

As of 2019, you have access to:

• ResizeObserver to fire callback on size change. Be careful here, it's not supported everywhere yet.
• MutationObserver that could be used for position, but I guess that's a bit overkill. Well supported though.
• IntersectionObserver as a bonus, that allows you to check for intersection with ancestors. Extremly useful to optimize stuff, especially in WebGL. This is pretty well supported.

Answer 2

You might could do it with CSS animations. Check out http://developer.streak.com/2012/11/how-to-detect-dom-changes-in-css.html and similar. I suppose it won't handle all your requirements though, now that I read through it some more.

Answer 3

A co-worker pointed me to a technique that uses the underflow and overflow events. I haven't tried it, and I have no idea what kind of browser support there is (looks like Chrome and FireFox, and it should work in IE by synthesizing the same events that browser would look for, but I have no idea which versions support the technique).