Registry / web-framework / resize-observer-polyfill

resize-observer-polyfill

library1.5.1jsnpmunverified

This package provides a robust polyfill for the W3C Resize Observer API, enabling consistent functionality across web browsers, including those without native support. Currently at stable version 1.5.1, the library maintains an active development pace, primarily focusing on bug fixes and minor enhancements, as evidenced by recent releases like 1.5.1 and 1.5.0. Its core strength lies in its non-polling observation strategy, which leverages MutationObserver with Mutation Events as a fallback, ensuring efficient performance without constant DOM checks. It differentiates itself by accurately following the Resize Observer specification, handling CSS transitions/animations, and observing changes from dynamic CSS pseudo-classes without modifying observed elements. The polyfill is lightweight, weighing only 2.44 KiB minified and gzipped, and is designed to be used as a ponyfill to prevent global object pollution.

web-framework

npm install resize-observer-polyfill

github ↗package ↗

INSTALL

IMPORT

SIG · RESIZE-OBSERVER-PO

resize-observer-polyfill

web-frameworkjavascriptv1.5.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ResizeObserver

✓ import ResizeObserver from 'resize-observer-polyfill';

✗ const ResizeObserver = require('resize-observer-polyfill');

The library primarily uses a default export, typically consumed as a ponyfill to avoid global pollution. The main file is a UMD bundle, but ES6 modules are used by bundlers aware of the `module` field.

ResizeObserver

✓ const { default: ResizeObserver } = require('resize-observer-polyfill');

✗ const ResizeObserver = require('resize-observer-polyfill');

For CommonJS environments, access the default export explicitly.

This example demonstrates how to import and instantiate ResizeObserver, then observe the document body for dimension changes, logging the new size and padding information.

import ResizeObserver from 'resize-observer-polyfill'; const ro = new ResizeObserver((entries, observer) => { for (const entry of entries) { const {left, top, width, height} = entry.contentRect; console.log('Element:', entry.target); console.log(`Element's size: ${ width }px x ${ height }px`); console.log(`Element's paddings: ${ top }px ; ${ left }px`); } }); // Observe the document body for resize changes ro.observe(document.body); // To stop observing later: // ro.unobserve(document.body); // To disconnect all observations: // ro.disconnect();

Debug

Known issues

deprecatedThe global version of the polyfill (`dist/ResizeObserver.global`) is deprecated since v1.3.0 and will be removed in a future major release. It's recommended to use the module version as a ponyfill.

fix

Use `import ResizeObserver from 'resize-observer-polyfill';` in your build process, leveraging module bundlers.

affects: >=1.3.0

deprecatedBower support for installation is deprecated and will be removed with the next major release.

fix

Migrate to npm for package management: `npm install resize-observer-polyfill --save-dev`.

affects: *

breakingThe `contentRect` interface changed from `ClientRect` to `DOMRectReadOnly` in v1.4.0, which might affect type declarations or property access expectations.

fix

Ensure your code and TypeScript types are compatible with `DOMRectReadOnly` for `entry.contentRect` properties (e.g., `width`, `height`, `x`, `y`, `top`, `left`, `right`, `bottom`).

affects: >=1.4.0

gotchaInternet Explorer 8 and earlier versions are explicitly not supported by this polyfill.

fix

For projects requiring IE8 support, an alternative solution for element resize detection would be necessary, as this polyfill does not cover it.

affects: *

gotchaThe `continuousUpdates` option was removed and substituted with a subscription for the `transitionend` event in v1.4.0. Code relying on this option will break.

fix

Remove `continuousUpdates` option usage and instead listen for `transitionend` events if continuous updates during transitions are specifically required, though the polyfill generally handles transitions implicitly.

affects: >=1.4.0

gotchaIn v1.3.1, the `module` field was removed from `package.json` due to multiple issues with Webpack 2. Users of Webpack 2+ might need to update their configurations or the polyfill version if encountering build issues related to module resolution.

fix

Upgrade to `resize-observer-polyfill@1.3.1` or newer. Ensure Webpack is configured to correctly handle UMD or ES module bundles without relying on the deprecated `module` field behavior.

affects: <1.3.1

Errors

Common errors & fixes

TypeError: ResizeObserver is not a constructor

Attempting to use CommonJS `require()` without correctly accessing the default export, or using `new ResizeObserver()` in an environment where the polyfill hasn't been properly imported/applied.

fix

For ES Modules: `import ResizeObserver from 'resize-observer-polyfill';`. For CommonJS: `const { default: ResizeObserver } = require('resize-observer-polyfill');` or ensure the polyfill is globally available if that's the intended usage pattern (though not recommended).

Property 'width' does not exist on type 'ClientRect' or Property 'left' does not exist on type 'DOMRectReadOnly'

Type-checking issues or incorrect property access on `entry.contentRect` after the interface change from `ClientRect` to `DOMRectReadOnly` in v1.4.0. While both have `width` and `height`, other properties like `x`, `y` might be accessed differently or have type mismatches.

fix

Update your TypeScript types or code to reflect the `DOMRectReadOnly` interface. Ensure properties like `left`, `top`, `right`, `bottom`, `x`, `y` are accessed correctly as defined by `DOMRectReadOnly`.

ResizeObserver loop completed with undelivered notifications.

This warning, often seen in browsers with native ResizeObserver or even with polyfills, indicates that a ResizeObserver callback caused an additional resize that triggered the observer again within the same frame, potentially leading to an infinite loop.

fix

Implement protective measures in your callback to prevent infinite loops. For example, by setting an 'expected size' and not triggering further resizes if the element is already at that size, or by throttling/debouncing the actions within the observer callback. Ensure that style changes within the callback do not immediately cause another dimension change.

Upgrade

Version history

1.5.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/que-etc/resize-observer-polyfill ↗

packagehttps://www.npmjs.com/package/resize-observer-polyfill ↗