fix: Avoid ResizeObserver loop limit exceeded.

Since ResizeObserver seems to be firing the callback immediately after observe() is called, this causes an infinite loop. Wrap ResizeObserver callback in requestAnimationFrame.

Fixes #40

README.md

@@ -130,10 +130,6 @@ The polyfill uses the CSS [`:where()`](https://developer.mozilla.org/en-US/docs/
 
 This is to ensure the specificity of your rules never changes (e.g. while the polyfill is loading, or on browsers with native support for container queries). On browsers without `:where()` supports, rules without the dummy will be ignored.
 
-## ResizeObserver Loop Errors
-
-When using the polyfill, you may observe reports of errors like `ResizeObserver loop completed with undelivered notifications` or `ResizeObserver loop limit exceeded`. These are expected, and may safely be ignored.
-
 ## License
 
 [Apache 2.0](LICENSE)

src/engine.ts

@@ -257,13 +257,25 @@ export function initializePolyfill(updateCallback: () => void) {
   // TODO: implement monkeypatch for CSSStyleSheet.prototype.insertRule and CSSStyleSheet.prototype.deleteRule
   // as they currently are not handled.
 
-  const resizeObserver = new ResizeObserver(entries => {
-    for (const entry of entries) {
-      const instance = getOrCreateInstance(entry.target);
-      instance.resize();
+  let animationFrameId: number;
+
+  const originalUnobserve = ResizeObserver.prototype.unobserve;
+  ResizeObserver.prototype.unobserve = function (target: Element) {
+    if (animationFrameId) {
+      window.cancelAnimationFrame(animationFrameId);
     }
-    getOrCreateInstance(documentElement).update(computeRootState());
-    updateCallback();
+    return originalUnobserve.apply(this, [target]);
+  }
+
+  const resizeObserver = new ResizeObserver(entries => {
+    animationFrameId = window.requestAnimationFrame(() => {
+      for (const entry of entries) {
+        const instance = getOrCreateInstance(entry.target);
+        instance.resize();
+      }
+      getOrCreateInstance(documentElement).update(computeRootState());
+      updateCallback();
+    });
   });
 
   const rootController = new NodeController(documentElement);