ResizeObserver

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
Basic support
Experimental
Chrome Full support 64Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support 64Chrome Android Full support 64Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
ResizeObserver() constructor
Experimental
Chrome Full support 64Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support 64Chrome Android Full support 64Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
observe
Experimental
Chrome Full support 64Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support 64Chrome Android Full support 64Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
unobserve
Experimental
Chrome Full support 64Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support 64Chrome Android Full support 64Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
disconnect
Experimental
Chrome Full support 64Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support 64Chrome Android Full support 64Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
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: jpmedley, Sheppy
Last updated by: jpmedley,