Resize Observer Updates

ResizeObserver is a an existing DOM observer API intended to be used for observing the size of DOM elements. There have been three updates to the spec: * A new ResizeObserverSize type was added * New properties on ResizeObserverEntry, specifically contentBoxSize, borderBoxSize, and devicePixelContentBoxSize * Exposure of new properties as sequences

Web Components want to be responsive: a map that tiles its content area; a menu that hides its title when space is too narrow. There is currently no API for an Component to detect when its size has changed. Web Applications can monitor viewport changes with window.resize event, or @media queries. ResizeObserver provides an API that gives Elements a way to observe, and respond to changes in their size. The API is a classic observer: observe/unobserve/disconnect.

Documentation

Specification

Editor's draft

Status in Chromium

Blink>Layout


Enabled by default (tracking bug) in:

  • Chrome for desktop release 84
  • Chrome for Android release 84
  • Android WebView release 84

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • Shipped/Shipping
  • In development
  • In development
  • Positive

Owners

Last updated on 2020-08-31