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: 155Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154Firefox
1–68Not supported
69+Supportedsince Sep 3, 2019
Current: 157Safari
1–13Not supported
13.1+Supportedsince Mar 24, 2020
Current: 27MobileChrome Android
18–63Not supported
64+Supportedsince Jan 23, 2018
Current: 155Firefox Android
4–68Not supported
79+Supportedsince Jul 28, 2020
Current: 157Safari iOS
1–13Not supported
13.4+Supportedsince Mar 24, 2020
Current: 27How 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-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| ResizeObserver | 64 | 79 | 69 | 13.1 | 64 | 79 | 13.4 |
| ResizeObserver.ResizeObserver | 64 | 79 | 69 | 13.1 | 64 | 79 | 13.4 |
| ResizeObserver.disconnect | 64 | 79 | 69 | 13.1 | 64 | 79 | 13.4 |
| ResizeObserver.observe | 64 | 79 | 69 | 13.1 | 64 | 79 | 13.4 |
| ResizeObserver.observe.options_box_parameter | 84 | 84 | 69 | 15.4 | 84 | 79 | 15.4 |
| ResizeObserver.unobserve | 64 | 79 | 69 | 13.1 | 64 | 79 | 13.4 |
| ResizeObserverEntry | 64 | 79 | 69 | 13.1 | 64 | 79 | 13.4 |
| ResizeObserverEntry.borderBoxSize | 84 | 84 | 92 | 15.4 | 84 | 92 | 15.4 |
| ResizeObserverEntry.contentBoxSize | 84 | 84 | 92 | 15.4 | 84 | 92 | 15.4 |
| ResizeObserverEntry.contentRect | 64 | 79 | 69 | 13.1 | 64 | 79 | 13.4 |
| ResizeObserverEntry.devicePixelContentBoxSize | 84 | 84 | 108 | ✕ | 84 | 108 | ✕ |
| ResizeObserverEntry.target | 64 | 79 | 69 | 13.1 | 64 | 79 | 13.4 |
| ResizeObserverSize | 84 | 84 | 69 | 15.4 | 84 | 79 | 15.4 |
| ResizeObserverSize.blockSize | 84 | 84 | 69 | 15.4 | 84 | 79 | 15.4 |
| ResizeObserverSize.inlineSize | 84 | 84 | 69 | 15.4 | 84 | 79 | 15.4 |