{"id":13942,"library":"resize-observer-polyfill","title":"ResizeObserver Polyfill","description":"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.","status":"active","version":"1.5.1","language":"javascript","source_language":"en","source_url":"https://github.com/que-etc/resize-observer-polyfill","tags":["javascript","ResizeObserver","resize","observer","util","client","browser","polyfill","ponyfill","typescript"],"install":[{"cmd":"npm install resize-observer-polyfill","lang":"bash","label":"npm"},{"cmd":"yarn add resize-observer-polyfill","lang":"bash","label":"yarn"},{"cmd":"pnpm add resize-observer-polyfill","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"const ResizeObserver = require('resize-observer-polyfill');","symbol":"ResizeObserver","correct":"import ResizeObserver from 'resize-observer-polyfill';"},{"note":"For CommonJS environments, access the default export explicitly.","wrong":"const ResizeObserver = require('resize-observer-polyfill');","symbol":"ResizeObserver","correct":"const { default: ResizeObserver } = require('resize-observer-polyfill');"}],"quickstart":{"code":"import ResizeObserver from 'resize-observer-polyfill';\n\nconst ro = new ResizeObserver((entries, observer) => {\n    for (const entry of entries) {\n        const {left, top, width, height} = entry.contentRect;\n\n        console.log('Element:', entry.target);\n        console.log(`Element's size: ${ width }px x ${ height }px`);\n        console.log(`Element's paddings: ${ top }px ; ${ left }px`);\n    }\n});\n\n// Observe the document body for resize changes\nro.observe(document.body);\n\n// To stop observing later:\n// ro.unobserve(document.body);\n// To disconnect all observations:\n// ro.disconnect();","lang":"javascript","description":"This example demonstrates how to import and instantiate ResizeObserver, then observe the document body for dimension changes, logging the new size and padding information."},"warnings":[{"fix":"Use `import ResizeObserver from 'resize-observer-polyfill';` in your build process, leveraging module bundlers.","message":"The 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.","severity":"deprecated","affected_versions":">=1.3.0"},{"fix":"Migrate to npm for package management: `npm install resize-observer-polyfill --save-dev`.","message":"Bower support for installation is deprecated and will be removed with the next major release.","severity":"deprecated","affected_versions":"*"},{"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`).","message":"The `contentRect` interface changed from `ClientRect` to `DOMRectReadOnly` in v1.4.0, which might affect type declarations or property access expectations.","severity":"breaking","affected_versions":">=1.4.0"},{"fix":"For projects requiring IE8 support, an alternative solution for element resize detection would be necessary, as this polyfill does not cover it.","message":"Internet Explorer 8 and earlier versions are explicitly not supported by this polyfill.","severity":"gotcha","affected_versions":"*"},{"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.","message":"The `continuousUpdates` option was removed and substituted with a subscription for the `transitionend` event in v1.4.0. Code relying on this option will break.","severity":"gotcha","affected_versions":">=1.4.0"},{"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.","message":"In 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.","severity":"gotcha","affected_versions":"<1.3.1"}],"env_vars":null,"search_vec":"'1.5.0':54 '1.5.1':30,52 '2.44':114 'accur':86 'across':18 'activ':35 'api':14 'browser':20,139 'bug':41 'chang':97 'check':81 'class':103 'client':138 'consist':16 'constant':79 'core':56 'css':93,100 'current':26 'design':121 'develop':36 'differenti':83 'dom':80 'dynam':99 'effici':76 'element':107 'enabl':15 'enhanc':45 'ensur':75 'event':71 'evidenc':47 'fallback':74 'fix':42 'focus':39 'follow':87 'function':17 'global':130 'gzip':118 'handl':92 'includ':21 'javascript':133 'kib':115 'leverag':67 'librari':32 'lie':58 'lightweight':111 'like':51 'maintain':33 'minifi':116 'minor':44 'modifi':105 'mutat':70 'mutationobserv':68 'nativ':24 'non':62 'non-pol':61 'object':131 'observ':13,64,90,96,106,136 'pace':37 'packag':4 'perform':77 'poll':63 'pollut':132 'polyfil':2,8,109,140 'ponyfil':127,141 'prevent':129 'primarili':38 'provid':5 'pseudo':102 'pseudo-class':101 'recent':49 'releas':50 'resiz':12,89,135 'resizeobserv':1,134 'robust':7 'specif':91 'stabl':28 'strategi':65 'strength':57 'support':25 'transitions/animations':94 'typescript':142 'use':124 'util':137 'version':29 'w3c':11 'web':19 'weigh':112 'without':23,78,104","created_at":"2026-04-20T01:57:06.613799+00:00","updated_at":"2026-04-20T01:57:06.613799+00:00","problems":[{"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).","cause":"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.","error":"TypeError: ResizeObserver is not a constructor"},{"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`.","cause":"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.","error":"Property 'width' does not exist on type 'ClientRect' or Property 'left' does not exist on type 'DOMRectReadOnly'"},{"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.","cause":"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.","error":"ResizeObserver loop completed with undelivered notifications."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/que-etc/resize-observer-polyfill","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/resize-observer-polyfill","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}