Back to the catalog

Element resize tracking

Async, Observers & Data

ResizeObserver

Baseline widely availablederived from web-features, captured 2026-09-06
  • Chrome64
  • Edge79
  • Firefox69
  • Safari13.1

Features it needs

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

ResizeObserver
const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    console.log(entry.contentBoxSize);
  }
});
observer.observe(document.querySelector("#panel"));
Live example

MDN reference

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.

Packages this covers

Minified and gzipped, captured 2026-09-06.