This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The ResizeObserver interface reports changes to the content rectangle of an Element or the bounding box of an SVGElement. The content rectangle is the box in which content can be placed, meaning the border box minus the padding. (See The box model for an explanation of borders and padding.)

ResizeObserver avoids infinite callback loops and cyclic dependencies that would be created by resizing in its own callback function. It does this by only processing elements deeper in the DOM in subsequent frames. Implementations should, if they follow the specification, invoke resize events before paint and after layout.

Constructor

ResizeObserver()
Creates and returns new ResizeObserver object.

Properties

None.

Event handlers

No

Methods

ResizeObserver.disconnect()
Unobserves all observed Element targets.
ResizeObserver.observe()
Initiates observing of a specified Element.
ResizeObserver.unobserve()
Ends the observing of a specified Element.

Examples

The following example changes the radius of a box's border in response to changes in its width.

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px';
  }
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));

Specifications

Specification Status Comment
Resize Observer
The definition of 'ResizeObserver' in that specification.
Editor's Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ResizeObserver
Experimental
Chrome Full support 64Edge No support NoFirefox No support NoIE No support NoOpera Full support 51Safari No support NoWebView Android Full support 64Chrome Android Full support 64Edge Mobile No support NoFirefox Android No support NoOpera Android Full support 51Safari iOS No support NoSamsung Internet Android Full support Yes
ResizeObserver() constructor
Experimental
Chrome Full support 64Edge No support NoFirefox No support NoIE No support NoOpera Full support 51Safari No support NoWebView Android Full support 64Chrome Android Full support 64Edge Mobile No support NoFirefox Android No support NoOpera Android Full support 51Safari iOS No support NoSamsung Internet Android Full support Yes
observe
Experimental
Chrome Full support 64Edge No support NoFirefox No support NoIE No support NoOpera Full support 51Safari No support NoWebView Android Full support 64Chrome Android Full support 64Edge Mobile No support NoFirefox Android No support NoOpera Android Full support 51Safari iOS No support NoSamsung Internet Android Full support Yes
unobserve
Experimental
Chrome Full support 64Edge No support NoFirefox No support NoIE No support NoOpera Full support 51Safari No support NoWebView Android Full support 64Chrome Android Full support 64Edge Mobile No support NoFirefox Android No support NoOpera Android Full support 51Safari iOS No support NoSamsung Internet Android Full support Yes
disconnect
Experimental
Chrome Full support 64Edge No support NoFirefox No support NoIE No support NoOpera Full support 51Safari No support NoWebView Android Full support 64Chrome Android Full support 64Edge Mobile No support NoFirefox Android No support NoOpera Android Full support 51Safari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also

Document Tags and Contributors

Contributors to this page: mdnwebdocs-bot, jpmedley, Sheppy
Last updated by: mdnwebdocs-bot,