coderef

Resize observerBaseline · Widely available

The ResizeObserver API observes and reacts to changes in the size of DOM elements.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jul 28, 2020. Widely available since Jan 28, 2023.

Browser support

DesktopChrome
1–63Not supported
64+Supportedsince Jan 23, 2018
Current: 155
Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154
Firefox
1–68Not supported
69+Supportedsince Sep 3, 2019
Current: 157
Safari
1–13Not supported
13.1+Supportedsince Mar 24, 2020
Current: 27
MobileChrome Android
18–63Not supported
64+Supportedsince Jan 23, 2018
Current: 155
Firefox Android
4–68Not supported
79+Supportedsince Jul 28, 2020
Current: 157
Safari iOS
1–13Not supported
13.4+Supportedsince Mar 24, 2020
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

JS
const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const { inlineSize } = entry.contentBoxSize[0];
    entry.target.dataset.size = inlineSize > 600 ? "large" : "small";
  }
});

observer.observe(document.querySelector(".chart"));

Feature detection

JS · check before using
if ("ResizeObserver" in globalThis) {
  // ResizeObserver is available
} else {
  // load a polyfill or use a fallback
}

Sub-features

Support for each part of the feature (15). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
ResizeObserver64796913.1647913.4
ResizeObserver.ResizeObserver64796913.1647913.4
ResizeObserver.disconnect64796913.1647913.4
ResizeObserver.observe64796913.1647913.4
ResizeObserver.observe.options_box_parameter84846915.4847915.4
ResizeObserver.unobserve64796913.1647913.4
ResizeObserverEntry64796913.1647913.4
ResizeObserverEntry.borderBoxSize84849215.4849215.4
ResizeObserverEntry.contentBoxSize84849215.4849215.4
ResizeObserverEntry.contentRect64796913.1647913.4
ResizeObserverEntry.devicePixelContentBoxSize8484108✕84108✕
ResizeObserverEntry.target64796913.1647913.4
ResizeObserverSize84846915.4847915.4
ResizeObserverSize.blockSize84846915.4847915.4
ResizeObserverSize.inlineSize84846915.4847915.4