{"record":{"id":"ecd18a3a3bbc1c73","repo":"handsontable/handsontable","slug":"the-resizeobserver-callback-was-fired-too-many-tim","errorCode":null,"errorMessage":"The ResizeObserver callback was fired too many times in direct succession.\nThis may be due to an infinite loop caused by setting a dynamic height/width (for example, with the `dvh` units) to a Handsontable container's parent. \nThe observer will be disconnected.","messagePattern":"The ResizeObserver callback was fired too many times in direct succession\\.\nThis may be due to an infinite loop caused by setting a dynamic height/width \\(for example, with the `dvh` units\\) to a Handsontable container's parent\\. \nThe observer will be disconnected\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"handsontable/src/3rdparty/walkontable/src/overlay/resizeMonitor.ts","lineNumber":73,"sourceCode":"   */\n  #containerDomResizeCountTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  /**\n   * The instance of the ResizeObserver that observes the size of the Walkontable wrapper element.\n   * In case of the size change detection the `onContainerElementResize` is fired.\n   *\n   * @type {ResizeObserver}\n   */\n  #resizeObserver = new ResizeObserver((entries) => {\n    requestAnimationFrame(() => {\n      if (!Array.isArray(entries) || !entries.length) {\n        return;\n      }\n\n      this.#containerDomResizeCount += 1;\n\n      if (this.#containerDomResizeCount === 300) {\n        warn('The ResizeObserver callback was fired too many times in direct succession.' +\n          '\\nThis may be due to an infinite loop caused by setting a dynamic height/width (for example, ' +\n          'with the `dvh` units) to a Handsontable container\\'s parent. ' +\n          '\\nThe observer will be disconnected.');\n\n        this.#resizeObserver.disconnect();\n      }\n\n      // This logic is required to prevent an endless loop of the ResizeObserver callback.\n      // https://github.com/handsontable/dev-handsontable/issues/1898#issuecomment-2154794817\n      if (this.#containerDomResizeCountTimeout !== null) {\n        clearTimeout(this.#containerDomResizeCountTimeout);\n      }\n\n      this.#containerDomResizeCountTimeout = setTimeout(() => {\n        this.#containerDomResizeCount = 0;\n      }, 100);\n\n      this.#deps.wtSettings.getSetting('onContainerElementResize');","sourceCodeStart":55,"sourceCodeEnd":91,"githubUrl":"https://github.com/handsontable/handsontable/blob/2c365a3291b45a331a6de1ed10a9deba683cfbc3/handsontable/src/3rdparty/walkontable/src/overlay/resizeMonitor.ts#L55-L91","documentation":"Walkontable installs a ResizeObserver on the grid container to react to size changes. If the callback fires ~300 times in direct succession, it concludes a resize feedback loop exists (resizing the container re-triggers layout changes that resize it again) and disconnects the observer to stop burning CPU, warning the developer that auto-resize is now disabled for this table.","triggerScenarios":"Setting a dynamic viewport-relative size (e.g. height: 100dvh, 100vh) on a parent of the Handsontable container that interacts with mobile browser UI show/hide, or any CSS that makes the container's size oscillate every frame after each grid re-render.","commonSituations":"Mobile Safari/Chrome with dvh/vh units where toolbars expand/collapse, CSS animations or transitions on the container size, flex/grid layouts where the grid's own content height feeds back into the parent's height.","solutions":["Replace dvh/vh units on the container's parent with a fixed height or a stable unit (px, %, or a JS-measured height)","Decouple the parent's size from the grid's rendered size (overflow hidden, fixed wrapper height)","If the warning was a false positive, re-initialize the table — the observer stays disconnected for that instance","Update to the latest patch release, as loop-detection thresholds have been tuned"],"exampleFix":"// before\n.hot-wrapper { height: 100dvh; }\n\n// after\n.hot-wrapper { height: calc(100vh - 60px); } /* stable, no per-frame reflow loop */","handlingStrategy":"validation","validationCode":"const cs = getComputedStyle(document.querySelector('.hot-wrapper'));\nconst unstable = /d(vh|vw)|vh|vw/.test(cs.height + cs.width);\nif (unstable) console.warn('viewport-relative sizing may cause ResizeObserver loop');","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Never size a Handsontable container's parent with dvh/vh units on mobile","Use fixed or JS-computed pixel heights for wrappers","Avoid CSS transitions/animations on the grid container's size","Keep the parent's size independent of the grid's rendered content","Listen for your own console warnings in QA so disconnected observers are caught early"],"tags":["resize-observer","css","performance","layout-loop"],"backgroundTag":"resize-observer-loop","analyzedSha":"2c365a3291b45a331a6de1ed10a9deba683cfbc3","analyzedAt":"2026-09-01T10:26:16.720Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-08T15:18:49.778Z"}