Added: Only check overflowed elements

example/child/frame.animate.html

@@ -85,6 +85,8 @@
     <h4>Data returned by parentIFrame.getParentProps()</h4>
     <table id="data"></table>
 
+    <span id="insert"></span>
+
     <!-- 
       The data-iframe-size attribute tells iframe-resizer to use this element
       to calculate the height of the iframe, when the content overflows the
@@ -99,10 +101,11 @@ <h4>Data returned by parentIFrame.getParentProps()</h4>
 
     <script>
       // Add some content to to show the effect of using data-iframe-size above
-      for (let i = 0; i < 10_000; i++) {
-        document.write(
-          '<div style="position: absolute">This is a test to see if the page will grow to accommodate the content.</div>',
-  );
+      for (let i = 0; i < 500; i++) {
+        const span = document.createElement('span')
+        span.style.setProperty('position', 'relative')
+        span.textContent = `. `
+        document.getElementById('insert').append(span);
       }
 
     </script>

example/child/frame.content.html

@@ -8,7 +8,6 @@
     <script
       type="text/javascript"
       src="../../js/iframe-resizer.child.js"
-      defer
     ></script>
     <script>
       function toggle() {

packages/child/index.js

@@ -2,6 +2,11 @@
 import formatAdvise from '../common/format-advise'
 import { addEventListener, removeEventListener } from '../common/listeners'
 import { getModeData } from '../common/mode'
+import {
+  getOverflowedElements,
+  isOverflowed,
+  observeOverflow,
+} from './overflow'
 
 const PERF_TIME_LIMIT = 4
 const PERF_MIN_ELEMENTS = 99
@@ -440,6 +445,7 @@
   const taggedElements = document.querySelectorAll(`[${SIZE_ATTR}]`)
   hasTags = taggedElements.length > 0
   calcElements = hasTags ? taggedElements : getAllElements(document)()
+  if (!hasTags) observeOverflow(calcElements)
 }
 
 function checkCalcMode(calcMode, calcModeDefault, modes, type) {
@@ -784,9 +790,13 @@
 const getAllNonStaticElements = () =>
   [...getAllElements(document)()].filter(checkPositionType)
 
+const resizeSet = new WeakSet()
+
 function setupResizeObservers(el) {
   if (!el) return
+  if (resizeSet.has(el)) return
   resizeObserver.observe(el)
+  resizeSet.add(el)
   log(`Attached resizeObserver: ${getElementName(el)}`)
 }
 
@@ -870,24 +880,38 @@
   const Side = capitalizeFirstLetter(side)
 
   let elVal = 0
-  let len = calcElements.length
   let maxEl = document.documentElement
   let maxVal = hasTags
     ? 0
     : document.documentElement.getBoundingClientRect().bottom
   let timer = performance.now()
 
-  calcElements.forEach((element) => {
+  const elements = [] // TODO: remove
+
+  const targetElements =
+    !hasTags && isOverflowed() ? getOverflowedElements() : calcElements
+
+  // console.log('!hasTags', !hasTags)
+  console.log('isOverflowed', isOverflowed())
+  console.log('test', !hasTags && isOverflowed())
+  console.log('targetElements', targetElements)
+  // console.log('calcElements', calcElements)
+
+  let len = targetElements.length
+
+  targetElements.forEach((element) => {
     if (
       !hasTags &&
-      hasCheckVisibility &&
+      hasCheckVisibility && // Safari missing checkVisibility
       !element.checkVisibility(checkVisibilityOptions)
     ) {
-      log(`Skipping non-visible element: ${getElementName(element)}`)
       len -= 1
       return
     }
 
+    // console.log('element', element)
+    elements.push(element) // TODO: remove
+
     elVal =
       element.getBoundingClientRect()[side] +
       parseFloat(getComputedStyle(element).getPropertyValue(`margin-${side}`))
@@ -908,7 +932,7 @@
 Position calculated from HTML element: ${getElementName(maxEl)} (${elementSnippet(maxEl, 100)})`
 
   if (timer < PERF_TIME_LIMIT || len < PERF_MIN_ELEMENTS || hasTags || isInit) {
-    log(logMsg)
+    console.log(logMsg, elements) // log(logMsg)
   } else if (perfWarned < timer && perfWarned < lastTimer) {
     perfWarned = timer * 1.2
     advise(

packages/child/overflow.js

@@ -0,0 +1,45 @@
+const OVERFLOW = 'data-iframe-overflow'
+const side = 'bottom'
+
+const options = {
+  root: document.documentElement,
+  rootMargin: '0px',
+  threshold: 1,
+}
+
+let overflowedElements = document.querySelectorAll(`[${OVERFLOW}]`)
+const observedElements = new WeakSet()
+
+const callback = (entries) => {
+  entries.forEach((entry) => {
+    if (
+      entry.boundingClientRect[side] === 0 ||
+      entry.boundingClientRect[side] >= entry.rootBounds[side]
+    ) {
+      entry.target.setAttribute(OVERFLOW, true)
+      // console.log(
+      //   entry.target,
+      //   entry.boundingClientRect[side],
+      //   entry.rootBounds[side],
+      // )
+    } else {
+      entry.target.removeAttribute(OVERFLOW)
+    }
+  })
+  overflowedElements = document.querySelectorAll(`[${OVERFLOW}]`)
+  console.log('overflowed', overflowedElements)
+}
+
+const observer = new IntersectionObserver(callback, options)
+
+export const observeOverflow = (nodeList) => {
+  nodeList.forEach((el) => {
+    if (observedElements.has(el)) return
+    observer.observe(el)
+    observedElements.add(el)
+  })
+}
+
+export const isOverflowed = () => overflowedElements.length > 0
+
+export const getOverflowedElements = () => overflowedElements