Web/API/ResizeObserver

The ResizeObserver interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement.

Note: The content box is the box in which content can be placed, meaning the border box minus the padding and border width. The border box encompasses the content, padding, and border. See The box model for further explanation.

ResizeObserver avoids infinite callback loops and cyclic dependencies that are often created when resizing via a 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 a new ResizeObserver object.

Properties

None.

Methods

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

Examples

In the [[../../../../../../mdn.github.io/dom-examples/resize-observer/resize-observer-text|resize-observer-text.html]] (see source) example, we use the resize observer to change the font-size of a header and paragraph as a slider’s value is changed causing the containing <div> to change width. This shows that you can respond to changes in an element’s size, even if they have nothing to do with the viewport.

We also provide a checkbox to turn the observer off and on. If it is turned off, the text will not change in response to the <div>'s width changing.

The JavaScript looks like so:

const h1Elem = document.querySelector('h1');
const pElem = document.querySelector('p');
const divElem = document.querySelector('body > div');
const slider = document.querySelector('input[type="range"]');
const checkbox = document.querySelector('input[type="checkbox"]');

divElem.style.width = '600px';

slider.addEventListener('input', () => {
  divElem.style.width = slider.value + 'px';
})

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    if(entry.contentBoxSize) {
      // Checking for chrome as using a non-standard array
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize[0].inlineSize/200) + 'rem';
        pElem.style.fontSize = Math.max(1, entry.contentBoxSize[0].inlineSize/600) + 'rem';
      } else {
        h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
        pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
      }          
    } else {
      h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
      pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
    }
  }
  console.log('Size changed');
});

resizeObserver.observe(divElem);

checkbox.addEventListener('change', () => {
  if (checkbox.checked) {
    resizeObserver.observe(divElem);
  } else {
    resizeObserver.unobserve(divElem);
  }
});

Specifications

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

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`ResizeObserver`	Chrome Full support 64	Edge Full support 79	Firefox Full support 69	IE No support No	Opera Full support 51	Safari Full support 13.1	WebView Android Full support 64	Chrome Android Full support 64	Firefox Android No support No	Opera Android Full support 47	Safari iOS Full support 13.4	Samsung Internet Android Full support 9.0
`ResizeObserver()` constructor	Chrome Full support 64	Edge Full support 79	Firefox Full support 69	IE No support No	Opera Full support 51	Safari Full support 13.1	WebView Android Full support 64	Chrome Android Full support 64	Firefox Android No support No	Opera Android Full support 47	Safari iOS Full support 13.4	Samsung Internet Android Full support 9.0
`disconnect`	Chrome Full support 64	Edge Full support 79	Firefox Full support 69	IE No support No	Opera Full support 51	Safari Full support 13.1	WebView Android Full support 64	Chrome Android Full support 64	Firefox Android No support No	Opera Android Full support 47	Safari iOS Full support 13.4	Samsung Internet Android Full support 9.0
`observe`	Chrome Full support 64	Edge Full support 79	Firefox Full support 69	IE No support No	Opera Full support 51	Safari Full support 13.1	WebView Android Full support 64	Chrome Android Full support 64	Firefox Android No support No	Opera Android Full support 47	Safari iOS Full support 13.4	Samsung Internet Android Full support 9.0
`unobserve`	Chrome Full support 64	Edge Full support 79	Firefox Full support 69	IE No support No	Opera Full support 51	Safari Full support 13.1	WebView Android Full support 64	Chrome Android Full support 64	Firefox Android No support No	Opera Android Full support 47	Safari iOS Full support 13.4	Samsung Internet Android Full support 9.0

Legend

Full support: Full support
No support: No support