Element resize tracking
ResizeObserver
Chrome64
Edge79
Firefox69
Safari13.1
Features it needs
- Resize observerWidely available
These polyfills exist because ResizeObserver had gaps in browser support. That gap closed years ago: every major engine ships it natively now. Calling it directly watches an element's box for size changes and calls you back, with no listener on window resize and no manual layout math.
When this applies
Running code when an element's own box changes size, not just the viewport.
The native approach
const observer = new ResizeObserver((entries) => {
for (const entry of entries) {
console.log(entry.contentBoxSize);
}
});
observer.observe(document.querySelector("#panel"));When the dependency is still right
An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.
- You need a framework hook's ergonomics, such as a ref and a reactive size value, rather than managing an observer instance yourself.
- You're targeting an engine old enough that the polyfill's manual measurement fallback is still doing real work.
- You need devicePixelContentBoxSize specifically. Chrome has it from 84 and Firefox from 108, but Safari does not implement it at all.
Signs it was hand-rolled
No package is involved in any of these, so nothing would match in a package.json. If the code looks like one of them, this rule applies anyway, and the conditions above still decide.
- polling an element's dimensions on an interval to notice when they change
Already checked by a linter
unicorn/prefer-observer-apis finds this mechanically, so it belongs in CI rather than in a review. Every rule a linter covers is on one page, with a config you can paste.