diff --git a/cli/types/cypress.d.ts b/cli/types/cypress.d.ts
index 7f049a8dc3f..08002327800 100644
--- a/cli/types/cypress.d.ts
+++ b/cli/types/cypress.d.ts
@@ -3193,6 +3193,11 @@ declare namespace Cypress {
      * @default false
      */
     experimentalMemoryManagement: boolean
+    /**
+     * Enables an alternative, performance-optimized visibility algorithm.
+     * @default false
+     */
+    experimentalFastVisibility: boolean
     /**
      * Allows for just-in-time compiling of a component test, which will only compile assets related to the component.
      * This results in a smaller bundle under test, reducing resource constraints on a given machine. This option is recommended
@@ -3284,6 +3289,7 @@ declare namespace Cypress {
      * @default false
      */
     experimentalPromptCommand?: boolean
+
   }
 
   /**
@@ -3365,14 +3371,14 @@ declare namespace Cypress {
   }
 
   interface SuiteConfigOverrides extends Partial<
-    Pick<ConfigOptions, 'animationDistanceThreshold' | 'blockHosts' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'includeShadowDom' | 'numTestsKeptInMemory' | 'pageLoadTimeout' | 'redirectionLimit' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'screenshotOnRunFailure' | 'slowTestThreshold' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations'>
+    Pick<ConfigOptions, 'animationDistanceThreshold' | 'blockHosts' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'experimentalFastVisibility' | 'includeShadowDom' | 'numTestsKeptInMemory' | 'pageLoadTimeout' | 'redirectionLimit' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'screenshotOnRunFailure' | 'slowTestThreshold' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations'>
   >, Partial<Pick<ResolvedConfigOptions, 'baseUrl' | 'testIsolation'>> {
     browser?: IsBrowserMatcher | IsBrowserMatcher[]
     keystrokeDelay?: number
   }
 
   interface TestConfigOverrides extends Partial<
-    Pick<ConfigOptions, 'animationDistanceThreshold' | 'blockHosts' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'includeShadowDom' | 'numTestsKeptInMemory' | 'pageLoadTimeout' | 'redirectionLimit' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'screenshotOnRunFailure' | 'slowTestThreshold' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations'>
+    Pick<ConfigOptions, 'animationDistanceThreshold' | 'blockHosts' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'experimentalFastVisibility' | 'includeShadowDom' | 'numTestsKeptInMemory' | 'pageLoadTimeout' | 'redirectionLimit' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'screenshotOnRunFailure' | 'slowTestThreshold' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations'>
   >, Partial<Pick<ResolvedConfigOptions, 'baseUrl'>> {
     browser?: IsBrowserMatcher | IsBrowserMatcher[]
     keystrokeDelay?: number
diff --git a/packages/config/src/options.ts b/packages/config/src/options.ts
index 44521ba45ee..7b7fd62660c 100644
--- a/packages/config/src/options.ts
+++ b/packages/config/src/options.ts
@@ -253,6 +253,12 @@ const driverConfigOptions: Array<DriverConfigOption> = [
     validation: validate.isBoolean,
     isExperimental: true,
     requireRestartOnChange: 'server',
+  }, {
+    name: 'experimentalFastVisibility',
+    defaultValue: false,
+    validation: validate.isBoolean,
+    isExperimental: true,
+    overrideLevel: 'any',
   }, {
     name: 'fileServerFolder',
     defaultValue: '',
diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index 43c7e31bbbf..aed605f77f1 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -1,117 +1,196 @@
 // @ts-ignore
 const { $, dom } = Cypress
 
-describe('src/cypress/dom/visibility', () => {
-  const add = (el) => {
-    return $(el).appendTo(cy.$$('body'))
+/**
+ * Most of the tests in here are declarative. Due to the range of visibility scenarios, test case
+ * understandability is paramount. These test cases are defined declaratively *in the fixture html
+ * file, and are iterated upon with the helper functions in the `visibility scenarios` describe block.
+ *
+ * CSS for test cases are inlined into the DOM purposefully, to ensure easy reference and debugging.
+ *
+ * Test case elements that are expected to be visible typically have a `lightgreen` background color,
+ * while test case elements that are expected to be hidden typically have a `lightcoral` background color.
+ * This helps to quickly identify if a given element's assertions are in-line with browser behavior.
+ *
+ * A test case where the visibility behavior is expected to be identical between the legacy and fast
+ * algorithms:
+ *
+ * <div class="testCase"
+ *   cy-expect="visible"
+ *   cy-label="helpful description for the assertion"
+ *   style="height: 100px; width: 100px;">
+ * </div>
+ *
+ * A test case where the visibility behavior is expected to be different between the legacy and fast
+ * algorithms (note the css of the example does not accurately reflect this visibility behavior):
+ *
+ * <div class="testCase"
+ *   cy-legacy-expect="visible"
+ *   cy-fast-expect="hidden"
+ *   cy-label="helpful description for the assertion"
+ *   style="height: 100px; width: 100px;">
+ * </div>
+ */
+
+describe('src/cypress/dom/visibility', {
+  slowTestThreshold: 500,
+}, () => {
+  function assertVisibilityForEl (el: HTMLElement) {
+    // once experimentalFastVisibility is added, switch based on the config value
+    // and use `cy-fast-expect` instead of `cy-legacy-expect` when it is enabled.
+    const expected = el.getAttribute('cy-expect') ?? (Cypress.config('experimentalFastVisibility') ?
+      el.getAttribute('cy-fast-expect') :
+      el.getAttribute('cy-legacy-expect'))
+
+    if (!expected) {
+      throw new Error(`Expected attribute 'cy-expect' or 'cy-legacy-expect' not found on test case_ element ${el.outerHTML}`)
+    }
+
+    expect(
+      $(el).is(`:${expected}`),
+      `${el.getAttribute('cy-label') ?? el.textContent ?? 'empty text content'} should be ${expected}`,
+    ).to.be.true
+
+    expect(el).to.be[expected]
+
+    cy.wrap(el).should(`be.${expected}`)
+
+    const opposite = expected === 'hidden' ? 'visible' : 'hidden'
+
+    expect(
+      $(el).is(`:${opposite}`),
+      `${el.getAttribute('cy-label') ?? el.textContent ?? 'empty text content'} should not be ${opposite}`,
+    ).to.be.false
+
+    expect(el).to.not.be[opposite]
+
+    cy.wrap(el).should(`not.be.${opposite}`)
   }
 
-  const reasonIs = ($el: JQuery, str: string) => {
-    expect(dom.getReasonIsHidden($el)).to.eq(str)
+  function prepareFixtureSection (section: string) {
+    cy.get('.test-section').each((el) => el.removeClass('active'))
+    cy.get(`[cy-section="${section}"]`).then((el) => el.addClass('active'))
+    cy.get(`[cy-section="${section}"]`).scrollIntoView()
   }
 
-  beforeEach(() => {
-    cy.visit('/fixtures/generic.html')
-  })
+  function assertVisibilityForSections (sections: string[]) {
+    for (const section of sections) {
+      it(`detects visibility for ${section} test cases`, () => {
+        prepareFixtureSection(section)
+        cy.get(`[cy-section="${section}"] .testCase`).then((els) => {
+          els.get().forEach(assertVisibilityForEl)
+        })
+      })
+    }
+  }
+  const modes = ['fast', 'legacy']
 
-  context('isHidden', () => {
-    it('exposes isHidden', () => {
-      expect(dom.isHidden).to.be.a('function')
-    })
+  for (const mode of modes) {
+    describe(`${mode}`, {
+      experimentalFastVisibility: mode === 'fast',
+    }, () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/generic.html')
+      })
 
-    it('throws when not passed a DOM element', () => {
-      const fn = () => {
-        dom.isHidden(null!)
-      }
+      context('isHidden', () => {
+        it('exposes isHidden', () => {
+          expect(dom.isHidden).to.be.a('function')
+        })
 
-      expect(fn).to.throw('`Cypress.dom.isHidden()` failed because it requires a DOM element. The subject received was: `null`')
-    })
-  })
+        it('throws when not passed a DOM element', () => {
+          const fn = () => {
+            dom.isHidden(null!)
+          }
 
-  context('isVisible', () => {
-    it('exposes isVisible', () => {
-      expect(dom.isVisible).to.be.a('function')
-    })
+          expect(fn).to.throw('`Cypress.dom.isHidden()` failed because it requires a DOM element. The subject received was: `null`')
+        })
+      })
 
-    it('throws when not passed a DOM element', () => {
-      const fn = () => {
-        // @ts-ignore
-        dom.isVisible('form')
-      }
+      context('isVisible', () => {
+        it('exposes isVisible', () => {
+          expect(dom.isVisible).to.be.a('function')
+        })
 
-      expect(fn).to.throw('`Cypress.dom.isVisible()` failed because it requires a DOM element. The subject received was: `form`')
-    })
-  })
+        it('throws when not passed a DOM element', () => {
+          const fn = () => {
+            // @ts-ignore
+            dom.isVisible('form')
+          }
 
-  context('#isScrollable', () => {
-    beforeEach(function () {
-      this.add = (el) => {
-        return $(el).appendTo(cy.$$('body'))
-      }
-    })
+          expect(fn).to.throw('`Cypress.dom.isVisible()` failed because it requires a DOM element. The subject received was: `form`')
+        })
+      })
 
-    it('returns true if window and body > window height', function () {
-      this.add('<div style="height: 1000px; width: 10px;" />')
-      const win = cy.state('window')
+      context('#isScrollable', () => {
+        beforeEach(function () {
+          this.add = (el) => {
+            return $(el).appendTo(cy.$$('body'))
+          }
+        })
 
-      const fn = () => {
-        return dom.isScrollable(win)
-      }
+        it('returns true if window and body > window height', function () {
+          this.add('<div style="height: 1000px; width: 10px;" />')
+          const win = cy.state('window')
 
-      expect(fn()).to.be.true
-    })
+          const fn = () => {
+            return dom.isScrollable(win)
+          }
 
-    it('returns false if window and body < window height', () => {
-      cy.$$('body').html('<div>foo</div>')
+          expect(fn()).to.be.true
+        })
 
-      const win = cy.state('window')
+        it('returns false if window and body < window height', () => {
+          cy.$$('body').html('<div>foo</div>')
 
-      const fn = () => {
-        return dom.isScrollable(win)
-      }
+          const win = cy.state('window')
 
-      expect(fn()).to.be.false
-    })
+          const fn = () => {
+            return dom.isScrollable(win)
+          }
 
-    it('returns true if document element and body > window height', function () {
-      this.add('<div style="height: 1000px; width: 10px;" />')
-      const documentElement = Cypress.dom.wrap(cy.state('document').documentElement)
+          expect(fn()).to.be.false
+        })
 
-      const fn = () => {
-        return dom.isScrollable(documentElement)
-      }
+        it('returns true if document element and body > window height', function () {
+          this.add('<div style="height: 1000px; width: 10px;" />')
+          const documentElement = Cypress.dom.wrap(cy.state('document').documentElement)
 
-      expect(fn()).to.be.true
-    })
+          const fn = () => {
+            return dom.isScrollable(documentElement)
+          }
 
-    it('returns false if document element and body < window height', () => {
-      cy.$$('body').html('<div>foo</div>')
+          expect(fn()).to.be.true
+        })
 
-      const documentElement = Cypress.dom.wrap(cy.state('document').documentElement)
+        it('returns false if document element and body < window height', () => {
+          cy.$$('body').html('<div>foo</div>')
 
-      const fn = () => {
-        return dom.isScrollable(documentElement)
-      }
+          const documentElement = Cypress.dom.wrap(cy.state('document').documentElement)
 
-      expect(fn()).to.be.false
-    })
+          const fn = () => {
+            return dom.isScrollable(documentElement)
+          }
 
-    it('returns false el is not scrollable', function () {
-      const noScroll = this.add(`\
+          expect(fn()).to.be.false
+        })
+
+        it('returns false el is not scrollable', function () {
+          const noScroll = this.add(`\
 <div style="height: 100px; overflow: auto;">
   <div>No Scroll</div>
 </div>\
 `)
 
-      const fn = () => {
-        return dom.isScrollable(noScroll)
-      }
+          const fn = () => {
+            return dom.isScrollable(noScroll)
+          }
 
-      expect(fn()).to.be.false
-    })
+          expect(fn()).to.be.false
+        })
 
-    it('returns false el has no overflow', function () {
-      const noOverflow = this.add(`\
+        it('returns false el has no overflow', function () {
+          const noOverflow = this.add(`\
 <div style="height: 100px; width: 100px; border: 1px solid green;">
   <div style="height: 150px;">
     No Overflow Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod.
@@ -119,1387 +198,342 @@ describe('src/cypress/dom/visibility', () => {
 </div>\
 `)
 
-      const fn = () => {
-        return dom.isScrollable(noOverflow)
-      }
+          const fn = () => {
+            return dom.isScrollable(noOverflow)
+          }
 
-      expect(fn()).to.be.false
-    })
+          expect(fn()).to.be.false
+        })
 
-    it('returns true when vertically scrollable', function () {
-      const vertScrollable = this.add(`\
+        it('returns true when vertically scrollable', function () {
+          const vertScrollable = this.add(`\
 <div style="height: 100px; width: 100px; overflow: auto;">
   <div style="height: 150px;">Vertical Scroll</div>
 </div>\
 `)
 
-      const fn = () => {
-        return dom.isScrollable(vertScrollable)
-      }
+          const fn = () => {
+            return dom.isScrollable(vertScrollable)
+          }
 
-      expect(fn()).to.be.true
-    })
+          expect(fn()).to.be.true
+        })
 
-    it('returns true when horizontal scrollable', function () {
-      const horizScrollable = this.add(`\
+        it('returns true when horizontal scrollable', function () {
+          const horizScrollable = this.add(`\
 <div style="height: 100px; width: 100px; overflow: auto; ">
   <div style="height: 150px;">Horizontal Scroll</div>
 </div>\
 `)
 
-      const fn = () => {
-        return dom.isScrollable(horizScrollable)
-      }
+          const fn = () => {
+            return dom.isScrollable(horizScrollable)
+          }
 
-      expect(fn()).to.be.true
-    })
+          expect(fn()).to.be.true
+        })
 
-    it('returns true when overflow scroll forced and content larger', function () {
-      const forcedScroll = this.add(`\
+        it('returns true when overflow scroll forced and content larger', function () {
+          const forcedScroll = this.add(`\
 <div style="height: 100px; width: 100px; overflow: scroll; border: 1px solid yellow;">
   <div style="height: 300px; width: 300px;">Forced Scroll</div>
 </div>\
 `)
 
-      const fn = () => {
-        return dom.isScrollable(forcedScroll)
-      }
-
-      expect(fn()).to.be.true
-    })
-  })
-
-  context('hidden/visible overrides', () => {
-    beforeEach(function () {
-      // ensure all tests run against a scrollable window
-      const scrollThisIntoView = add('<div style="height: 1000px;"></div><div>Should be in view</div>')
-
-      this.$visHidden = add('<ul style="visibility: hidden;"></ul>')
-      this.$parentVisHidden = add('<div class="invis" style="visibility: hidden;"><button>parent visibility: hidden</button></div>')
-      this.$displayNone = add('<button style="display: none">display: none</button>')
-      this.$inputHidden = add('<input type="hidden" value="abcdef">')
-      this.$divNoWidth = add('<div style="width: 0; height: 100px;"></div>')
-      this.$divNoHeight = add('<div style="width: 50px; height: 0px;"></div>')
-      this.$divDetached = $('<div>foo</div>')
-      this.$divVisible = add(`<div>visible</div>`)
-
-      this.$optionInSelect = add(`\
-<select>
-  <option>Naruto</option>
-</select>\
-`)
-
-      this.$optgroupInSelect = add(`\
-<select>
-  <optgroup label='Shinobi'>
-    <option>Naruto</option>
-  </optgroup>
-</select>\
-`)
-
-      this.$optionInHiddenSelect = add(`\
-<select style='display: none'>
-  <option>Sasuke</option>
-</select>\
-`)
-
-      this.$optionOutsideSelect = add(`\
-<div style='display: none'>
-  <option id='option-hidden'>Sasuke</option>
-</div>
-<div>
-  <option id='option-visible'>Naruto</option>
-</div>\
-`)
-
-      this.$optionHiddenInSelect = add(`\
-<select>
-  <option>--Select--</option>
-  <option id="hidden-opt" style='display: none'>Sakura</option>
-</select>\
-`)
-
-      this.$btnOpacityZero = add(`\
-<button style="opacity: 0;">opacity: 0</button>\
-`)
-
-      this.$btnOpacityHalf = add(`\
-<button style="opacity: 0.5;">opacity: 0.5</button>\
-`)
-
-      this.$parentOpacityZero = add(`\
-<div style="opacity: 0;">
-  <button>parent opacity: 0</button>
-</div>\
-`)
-
-      this.$tableVisCollapse = add(`\
-<table>
-  <tr>
-    <td>Naruto</td>
-    <td class='collapse' style='visibility: collapse;'>Sasuke</td>
-    <td>Sakura</td>
-  </tr>
-  <tr class='collapse' style='visibility: collapse;'>
-    <td>Kaguya</td>
-    <td><span id='collapse-span'>Madara</span></td>
-    <td>Orochimaro</td>
-  </tr>
-</table>\
-`)
-
-      this.$parentNoWidth = add(`\
-<div style='width: 0; height: 100px; overflow: hidden;'>
-    <span>parent width: 0</span>
-</div>`)
-
-      this.$parentNoHeight = add(`\
-<div style='width: 100px; height: 0px; overflow: hidden;'>
-  <span>parent height: 0</span>
-</div>`)
-
-      this.$parentNoWidthHeightOverflowAuto = add(`\
-<div style='width: 0; height: 0px; overflow: auto;'>
-  <span>parent no size, overflow: auto</span>
-</div>`)
-
-      this.$parentWithWidthHeightNoOverflow = add(`\
-<div style='width: 100px; height: 100px; overflow: hidden;'>
-    <span>parent with size, overflow: hidden</span>
-</div>`)
-
-      this.$ancestorWithWidthHeightNoOverflow = add(`\
-      <div style='width: 100px; height: 100px'>
-          <div><span>parent with size, overflow: hidden</span></div>
-      </div>`)
-
-      this.$ancestorNoWidth = add(`\
-      <div style='width: 0; height: 100px; overflow: hidden;'>
-        <div>
-          <span>ancestor width: 0</span>
-        </div>
-      </div>`)
-
-      this.$ancestorNoHeight = add(`\
-      <div style='width: 100px; height: 0px; overflow: hidden;'>
-        <div>
-          <span>ancestor height: 0</span>
-        </div>
-      </div>`)
-
-      this.$childPosAbs = add(`\
-<div style='width: 0; height: 100px; overflow: hidden;'>
-  <div style='height: 500px; width: 500px;'>
-    <span style='position: absolute;'>position: absolute</span>
-  </div>
-</div>`)
-
-      this.$childPosFixed = add(`\
-<div id="childPosFixed" style='width: 100px; height: 100px; overflow: hidden;'>
-  <button style='position: fixed; top: 0;'>position: fixed</button>
-</div>`)
-
-      this.$childPointerEventsNone = add(`\
-<div style="position: fixed; top: 60px;">
-  <span style="pointer-events: none;">child pointer-events: none</span>
-</div>\
-`)
-
-      this.$descendentPosAbs = add(`\
-<div style='width: 0; height: 100px; overflow: hidden;'>
-  <div style='height: 500px; width: 500px; position: absolute;'>
-    <span>no width, descendant position: absolute</span>
-  </div>
-</div>`)
-
-      this.$descendentPosFixed = add(`\
-<div id="descendentPosFixed" style='width: 0; height: 100px; overflow: hidden;'>
-  <div style='height: 500px; width: 500px; position: fixed; top: 0; right: 0;'>
-    <button>no width, descendant position: fixed</button>
-  </div>
-</div>`)
-
-      this.$descendantInPosFixed = add(`\
-<div>
-  <div id="descendantInPosFixed" style="width: 200px; position: fixed; bottom: 0; right: 0">
-    underneath
-    <div style="width: 200px; position: fixed; bottom: 0; right: 0">on top of the other</div>
-  </div>
-</div>\
-`)
-
-      this.$coveredUpPosFixed = add(`\
-<div>
-  <div id="coveredUpPosFixed" style="position: fixed; bottom: 0; left: 0">underneath</div>
-  <div style="position: fixed; bottom: 0; left: 0">on top</div>
-</div>\
-`)
-
-      this.$offScreenPosFixed = add(`\
-<div id="offScreenPosFixed" style="position: fixed; bottom: 0; left: -100px;">off screen</div>\
-`)
-
-      this.$parentPosAbs = add(`\
-<div style='width: 0; height: 100px; overflow: hidden; position: absolute;'>
-  <div style='height: 500px; width: 500px;'>
-    <span>parent position: absolute</span>
-  </div>
-</div>`)
-
-      this.$parentDisplayNone = add(`\
-<div id="none" style='display: none;'>
-  <span>parent display: none</span>
-</div>\
-`)
-
-      this.$parentPointerEventsNone = add(`\
-<div style="pointer-events: none">
-  <span style="position: fixed; left: 0; top: 50%;">parent pointer-events: none</span>
-</div>\
-`)
-
-      this.$parentPointerEventsNoneCovered = add(`\
-<div style="pointer-events: none;">
-  <span style="position: fixed; top: 40px;">parent pointer-events: none</span>
-</div>
-<span style="position: fixed; top: 40px; background: red;">covering the element with pointer-events: none</span>\
-`)
-
-      this.$parentDisplayInlineChildDisplayBlock = add(`\
-<div>
-  <span>
-    <label style="display: block;">display: block</label>
-  </span>
-</div>\
-`)
-
-      this.$elOutOfParentBoundsToLeft = add(`\
-<div style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
-  <span style='position: absolute; width: 100px; height: 100px; left: -100px; top: 0px;'>position: absolute, out of bounds left</span>
-</div>\
-`)
-
-      this.$elOutOfParentBoundsToRight = add(`\
-<div id="elOutOfParentBoundsToRight" style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
-  <span style='position: absolute; width: 100px; height: 100px; right: -100px; top: 0px;'>position: absolute, out of bounds right</span>
-</div>\
-`)
-
-      this.$elOutOfParentBoundsAbove = add(`\
-<div style='width: 100px; height: 100px; overflow: hidden; position: fixed;'>
-  <span id='elOutOfParentBoundsAbove' style='position: absolute; width: 100px; height: 100px; left: 0px; top: -100px;'>position: absolute, out of bounds above</span>
-</div>\
-`)
-
-      this.$elOutOfParentBoundsBelow = add(`\
-<div id="elOutOfParentBoundsBelow" style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
-  <span style='position: absolute; width: 100px; height: 100px; left: 0px; bottom: -100px;'>position: absolute, out of bounds below</span>
-</div>\
-`)
-
-      this.$elOutOfParentWithOverflowYHiddenBounds = add(`\
-<div style='width: 100px; height: 100px; overflow-y: hidden; position: relative;'>
-  <span style='position: absolute; left: 0px; top: 200px;'>position: absolute, out of bounds below</span>
-</div>\
-`)
-
-      this.$elOutOfParentWithOverflowXHiddenBounds = add(`\
-<div style='width: 100px; height: 100px; overflow-x: hidden; position: relative;'>
-  <span style='position: absolute; left: 200px; top: 0;'>position: absolute, out of bounds below</span>
-</div>\
-`)
-
-      this.$elOutOfParentWithFlexAndOverflowHiddenBounds = add(`\
-<div style="display: flex; overflow: hidden;">
-  <div id="red" style="flex: 0 0 80%; background-color: red;">red</div>
-  <div id="green" style="flex: 0 0 80%; background-color: green;">green</div>
-  <div id="blue" style="background-color: blue;">blue</div>
-</div>\
-`)
-
-      this.$elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent = add(`\
-<div style="border: 1px solid red; width: 200px; height: 200px; overflow: hidden;">
-  <div style="position: absolute; left: 300px; border: 1px solid blue; width: 200px; height: 200px;">
-    <span style="border: 1px solid green;">Hello</span>
-  </div>\
-`)
-
-      this.$elOutOfAncestorOverflowAutoBounds = add(`\
-<div style='width: 100px; height: 100px; overflow: auto;'>
-  <div style='width: 1000px; position: relative;'>
-    <span style='position: absolute; left: 300px; top: 0px;'>out of bounds, parent wide, ancestor overflow: auto</span>
-  </div>
-</div>\
-`)
-
-      this.$elInPosAbsParentsBounds = add(`\
-<div style='width: 200px; height: 200px; overflow: hidden; position: relative;'>
-  <div style='position: absolute;'>
-    <div style='position: absolute;'>
-      <span style='position: absolute; left: 50px; top: 50px;'>in bounds, parent position: absolute</span>
-    </div>
-  </div>
-</div>\
-`)
-
-      this.$elOutOfPosAbsParentsBounds = add(`\
-<div style='width: 100px; height: 100px; overflow: hidden; position: relative; top: 700px; left: 700px;'>
-  <div style='position: absolute;'>
-    <div style='position: absolute;'>
-      <span style='position: absolute; left: -350px; top: 0px;'>out of bounds, parent position: absolute</span>
-    </div>
-  </div>
-</div>\
-`)
-
-      this.$elInParentBounds = add(`\
-<div style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
-  <span style='position: absolute; left: 0px; top: 0px;'>in bounds, position: absolute</span>
-</div>\
-`)
-
-      this.$elOutOfScrollingParentBounds = add(`\
-<div style='width: 100px; height: 100px; overflow: scroll; position: relative; top: 700px; left: 700px;'>
-  <div style='position: absolute;'>
-    <div style='position: absolute;'>
-      <span style='position: absolute; left: 300px; top: 0px;'>out of scrolling bounds, position: absolute</span>
-    </div>
-  </div>
-</div>\
-`)
-
-      this.$elIsOutOfBoundsOfAncestorsOverflowButWithinRelativeAncestor = add(`\
-<div style='padding: 100px; position: relative;'>
-  <div style='overflow: hidden;'>
-    <div>
-      <span style='position: absolute; left: 0; top: 0;'>in bounds of ancestor, position: absolute, parent overflow: hidden</span>
-    </div>
-  </div>
-</div>\
-`)
-
-      this.$elIsRelativeAndOutOfBoundsOfAncestorOverflow = add(`\
-<div style='overflow: hidden;'>
-  <div>
-    <span style='position: relative; left: 0; top: -200px;'>out of bounds, position: relative</span>
-  </div>
-</div>\
-`)
-
-      this.$elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow = add(`\
-<div>
-  <div>
-    <span style='position: relative; left: 0; top: -200px;'>out of bounds but visible, position: relative</span>
-  </div>
-</div>\
-`)
-
-      this.$parentOutOfBoundsButElInBounds = add(`\
-<div style='position: relative; padding: 20px;'>
-  <div style='overflow: hidden;'>
-    <div style='position: relative; left: 0; top: -100px;'>
-      <span style='position: relative; left: 0; top: 100px;'>in bounds of ancestor, parent out of bounds</span>
-    </div>
-  </div>
-</div>\
-`)
-
-      this.$parentWithClipPathAbsolutePositionElOutsideClipPath = add(`\
-<div style="position: absolute; clip-path: polygon(0 0, 0 0, 0 0, 0 0);">
-  <span>clip-path</span>
-</div>\
-`)
-
-      this.$parentWithClipPathAbsolutePositionElInsideClipPath = add(`\
-<div style="position: absolute; clip-path: circle(100%);">
-  <span>clip-path</span>
-</div>\
-`)
-
-      this.$parentWithTransformScaleElOutsideScale = add(`\
-<div style="transform: scale(0,0)">
-  <span>TRANSFORMERS</span>
-</div>\
-`)
-
-      this.$parentWithTransformScaleElInsideScale = add(`\
-<div style="transform: scale(1,1)">
-  <span>TRANSFORMERS</span>
-</div>\
-`)
-
-      this.$ancestorTransformMakesElOutOfBoundsOfAncestor = add(`\
-<div style='margin-left: 100px; overflow: hidden; width: 100px;'>
-  <div style='transform: translateX(-100px); width: 200px;'>
-    <div style='width: 100px;'>
-      <span>out of ancestor's bounds due to ancestor translate</span>
-    </div>
-  </div>
-</div>\
-`)
-
-      this.$ancestorTransformMakesElInBoundsOfAncestor = add(`\
-<div style='margin-left: 100px; overflow: hidden; width: 100px;'>
-  <div style='transform: translateX(-100px); width: 300px;'>
-    <div style='display: inline-block; width: 100px;'>
-      <span>out of ancestor's bounds due to ancestor translate</span>
-    </div>
-    <div id='inbounds' style='display: inline-block; width: 100px;'>
-      <span>in ancestor's bounds due to ancestor translate</span>
-    </div>
-  </div>
-</div>\
-`)
-
-      // scroll the 2nd element into view so that
-      // there is always a scrollTop so we ensure
-      // its factored in (window vs viewport) calculations
-      scrollThisIntoView.get(1).scrollIntoView()
-    })
-
-    describe('html or body', () => {
-      it('is visible if html', () => {
-        expect(cy.$$('html').is(':hidden')).to.be.false
-        expect(cy.$$('html').is(':visible')).to.be.true
-
-        expect(cy.$$('html')).not.to.be.hidden
-        expect(cy.$$('html')).to.be.visible
-
-        cy.wrap(cy.$$('html')).should('not.be.hidden')
-        cy.wrap(cy.$$('html')).should('be.visible')
-      })
-
-      it('is visible if body', () => {
-        expect(cy.$$('body').is(':hidden')).to.be.false
-        expect(cy.$$('body').is(':visible')).to.be.true
-
-        expect(cy.$$('body')).not.to.be.hidden
-        expect(cy.$$('body')).to.be.visible
-
-        cy.wrap(cy.$$('body')).should('not.be.hidden')
-        cy.wrap(cy.$$('body')).should('be.visible')
-      })
-
-      it('is visible if display none on body or html', () => {
-        cy.$$('html').css('display', 'none')
-        cy.$$('body').css('display', 'none')
-
-        expect(cy.$$('html')).not.to.be.hidden
-        expect(cy.$$('html')).to.be.visible
-
-        expect(cy.$$('body')).not.to.be.hidden
-        expect(cy.$$('body')).to.be.visible
-      })
-    })
-
-    describe('css visibility', () => {
-      it('is hidden if .css(visibility) is hidden', function () {
-        expect(this.$visHidden.is(':hidden')).to.be.true
-        expect(this.$visHidden.is(':visible')).to.be.false
-
-        expect(this.$visHidden).to.be.hidden
-        expect(this.$visHidden).to.not.be.visible
-
-        cy.wrap(this.$visHidden).should('be.hidden')
-        cy.wrap(this.$visHidden).should('not.be.visible')
-      })
-
-      it('is hidden if parents have .css(visibility) hidden', function () {
-        expect(this.$parentVisHidden.find('button').is(':hidden')).to.be.true
-        expect(this.$parentVisHidden.find('button').is(':visible')).to.be.false
-
-        expect(this.$parentVisHidden.find('button')).to.be.hidden
-        expect(this.$parentVisHidden.find('button')).to.not.be.visible
-
-        cy.wrap(this.$parentVisHidden).find('button').should('be.hidden')
-        cy.wrap(this.$parentVisHidden).find('button').should('not.be.visible')
-      })
-
-      it('is hidden if visibility collapse', function () {
-        expect(this.$tableVisCollapse.find('td.collapse')).to.be.hidden
-        expect(this.$tableVisCollapse.find('td.collapse')).to.not.be.visible
-
-        expect(this.$tableVisCollapse.find('tr.collapse')).to.be.hidden
-        expect(this.$tableVisCollapse.find('tr.collapse')).to.not.be.visible
-
-        expect(this.$tableVisCollapse.find('tr.collapse td')).to.be.hidden
-        expect(this.$tableVisCollapse.find('tr.collapse td')).to.not.be.visible
-      })
-
-      it('is hidden if parent has visibility collapse', function () {
-        expect(this.$tableVisCollapse.find('tr.collapse td')).to.be.hidden
-        expect(this.$tableVisCollapse.find('tr.collapse td')).to.not.be.visible
-
-        expect(this.$tableVisCollapse.find('#collapse-span')).to.be.hidden
-        expect(this.$tableVisCollapse.find('#collapse-span')).to.not.be.visible
-      })
-
-      it('is hidden if input type hidden', function () {
-        expect(this.$inputHidden.is(':hidden')).to.be.true
-        expect(this.$inputHidden.is(':visible')).to.be.false
-
-        expect(this.$inputHidden).to.be.hidden
-        expect(this.$inputHidden).to.not.be.visible
-
-        cy.wrap(this.$inputHidden).should('be.hidden')
-        cy.wrap(this.$inputHidden).should('not.be.visible')
-      })
-    })
-
-    describe('option and optgroup', () => {
-      it('is visible if option in visible select', function () {
-        expect(this.$optionInSelect.find('option').is(':hidden')).to.be.false
-        expect(this.$optionInSelect.find('option').is(':visible')).to.be.true
-
-        expect(this.$optionInSelect.find('option')).not.to.be.hidden
-        expect(this.$optionInSelect.find('option')).to.be.visible
-
-        cy.wrap(this.$optionInSelect.find('option')).should('not.be.hidden')
-        cy.wrap(this.$optionInSelect.find('option')).should('be.visible')
-      })
-
-      it('is visible if optgroup in visible select', function () {
-        expect(this.$optgroupInSelect.find('optgroup').is(':hidden')).to.be.false
-        expect(this.$optgroupInSelect.find('optgroup').is(':visible')).to.be.true
-
-        expect(this.$optgroupInSelect.find('optgroup')).not.to.be.hidden
-        expect(this.$optgroupInSelect.find('optgroup')).to.be.visible
-
-        cy.wrap(this.$optgroupInSelect.find('optgroup')).should('not.be.hidden')
-        cy.wrap(this.$optgroupInSelect.find('optgroup')).should('be.visible')
-      })
-
-      it('is hidden if option in hidden select', function () {
-        expect(this.$optionInHiddenSelect.find('option').is(':hidden')).to.be.true
-        expect(this.$optionInHiddenSelect.find('option').is(':visible')).to.be.false
-
-        expect(this.$optionInHiddenSelect.find('option')).to.be.hidden
-        expect(this.$optionInHiddenSelect.find('option')).not.to.be.visible
-
-        cy.wrap(this.$optionInHiddenSelect.find('option')).should('be.hidden')
-        cy.wrap(this.$optionInHiddenSelect.find('option')).should('not.be.visible')
-      })
-
-      it('is hidden if option is display none', function () {
-        expect(this.$optionHiddenInSelect.find('#hidden-opt').is(':hidden')).to.be.true
-        expect(this.$optionHiddenInSelect.find('#hidden-opt').is(':visible')).to.be.false
-
-        expect(this.$optionHiddenInSelect.find('#hidden-opt')).to.be.hidden
-        expect(this.$optionHiddenInSelect.find('#hidden-opt')).not.to.be.visible
-
-        cy.wrap(this.$optionHiddenInSelect.find('#hidden-opt')).should('be.hidden')
-        cy.wrap(this.$optionHiddenInSelect.find('#hidden-opt')).should('not.be.visible')
-      })
-
-      it('follows regular visibility logic if option outside of select', { browser: '!webkit' }, function () {
-        expect(this.$optionOutsideSelect.find('#option-hidden').is(':hidden')).to.be.true
-        expect(this.$optionOutsideSelect.find('#option-hidden')).to.be.hidden
-        cy.wrap(this.$optionOutsideSelect.find('#option-hidden')).should('be.hidden')
-
-        expect(this.$optionOutsideSelect.find('#option-visible').is(':visible')).to.be.true
-        expect(this.$optionOutsideSelect.find('#option-visible')).to.be.visible
-
-        cy.wrap(this.$optionOutsideSelect.find('#option-visible')).should('be.visible')
-      })
-    })
-
-    describe('css opacity', () => {
-      it('is hidden if opacity is 0', function () {
-        expect(this.$btnOpacityZero.is(':hidden')).to.be.true
-        expect(this.$btnOpacityZero.is(':visible')).to.be.false
-
-        expect(this.$btnOpacityZero).to.be.hidden
-        expect(this.$btnOpacityZero).not.to.be.visible
-
-        cy.wrap(this.$btnOpacityZero).should('be.hidden')
-        cy.wrap(this.$btnOpacityZero).should('not.be.visible')
-      })
-
-      it('is hidden if parent has `opacity: 0`', function () {
-        expect(this.$parentOpacityZero.find('button').is(':hidden')).to.be.true
-        expect(this.$parentOpacityZero.find('button').is(':visible')).to.be.false
-
-        expect(this.$parentOpacityZero.find('button')).to.be.hidden
-        expect(this.$parentOpacityZero.find('button')).not.to.be.visible
-
-        cy.wrap(this.$parentOpacityZero.find('button')).should('be.hidden')
-        cy.wrap(this.$parentOpacityZero.find('button')).should('not.be.visible')
-      })
-
-      it('is visible if opacity is greater than 0 but less than 1', function () {
-        expect(this.$btnOpacityHalf.is(':visible')).to.be.true
-        expect(this.$btnOpacityHalf.is(':hidden')).to.be.false
-
-        expect(this.$btnOpacityHalf).to.be.visible
-        expect(this.$btnOpacityHalf).not.to.be.hidden
-
-        cy.wrap(this.$btnOpacityHalf).should('be.visible')
-        cy.wrap(this.$btnOpacityHalf).should('not.be.hidden')
-      })
-    })
-
-    describe('width and height', () => {
-      it('is visible when el.textContent, even if offsetWidth is 0', function () {
-        this.$divNoWidthTextContent = add('<div style="width: 0; height: 100px;">width: 0</div>')
-
-        expect(this.$divNoWidthTextContent.is(':hidden')).to.be.false
-        expect(this.$divNoWidthTextContent.is(':visible')).to.be.true
-
-        expect(this.$divNoWidthTextContent).to.not.be.hidden
-        expect(this.$divNoWidthTextContent).to.be.visible
-
-        cy.wrap(this.$divNoWidthTextContent).should('be.not.hidden')
-        cy.wrap(this.$divNoWidthTextContent).should('be.visible')
-      })
-
-      it('is visible when el.textContent, even if offsetHeight is 0', function () {
-        this.$divNoHeightTextContent = add('<div style="width: 50px; height: 0px;">height: 0</div>')
-
-        expect(this.$divNoHeightTextContent.is(':hidden')).to.be.false
-        expect(this.$divNoHeightTextContent.is(':visible')).to.be.true
-
-        expect(this.$divNoHeightTextContent).to.not.be.hidden
-        expect(this.$divNoHeightTextContent).to.be.visible
-
-        cy.wrap(this.$divNoHeightTextContent).should('be.not.hidden')
-        cy.wrap(this.$divNoHeightTextContent).should('be.visible')
-      })
-
-      it('is hidden when when el.textContent contains only whitespace and offsetWidth is 0', function () {
-        this.$divNoHeightBlankTextContent = add('<div style="width: 0px; height: 50px;">   \n   \t  </div>')
-
-        expect(this.$divNoHeightBlankTextContent.is(':hidden')).to.be.true
-        expect(this.$divNoHeightBlankTextContent.is(':visible')).to.be.false
-
-        expect(this.$divNoHeightBlankTextContent).to.be.hidden
-        expect(this.$divNoHeightBlankTextContent).to.not.be.visible
-
-        cy.wrap(this.$divNoHeightBlankTextContent).should('be.hidden')
-        cy.wrap(this.$divNoHeightBlankTextContent).should('not.be.visible')
-      })
+          const fn = () => {
+            return dom.isScrollable(forcedScroll)
+          }
 
-      it('is hidden when no el.textContent with offsetHeight is 0', function () {
-        expect(this.$divNoHeight.is(':hidden')).to.be.true
-        expect(this.$divNoHeight.is(':visible')).to.be.false
-
-        expect(this.$divNoHeight).to.be.hidden
-        expect(this.$divNoHeight).to.not.be.visible
-
-        cy.wrap(this.$divNoHeight).should('be.hidden')
-        cy.wrap(this.$divNoHeight).should('not.be.visible')
-      })
-
-      it('is hidden when no el.textContent with offsetWidth is 0', function () {
-        expect(this.$divNoWidth.is(':hidden')).to.be.true
-        expect(this.$divNoWidth.is(':visible')).to.be.false
-
-        expect(this.$divNoWidth).to.be.hidden
-        expect(this.$divNoWidth).to.not.be.visible
-
-        cy.wrap(this.$divNoWidth).should('be.hidden')
-        cy.wrap(this.$divNoWidth).should('not.be.visible')
-      })
-
-      it('is hidden if parent has overflow: hidden and no width', function () {
-        expect(this.$parentNoWidth.find('span')).to.be.hidden
-        expect(this.$parentNoWidth.find('span')).to.not.be.visible
-      })
-
-      it('is hidden if parent has overflow: hidden and no height', function () {
-        expect(this.$parentNoHeight.find('span')).to.be.hidden
-        expect(this.$parentNoHeight.find('span')).to.not.be.visible
-      })
-
-      it('is hidden if ancestor has overflow:hidden and no width', function () {
-        expect(this.$ancestorNoWidth.find('span')).to.be.hidden
-        expect(this.$ancestorNoWidth.find('span')).to.not.be.visible
-      })
-
-      it('is hidden if ancestor has overflow:hidden and no height', function () {
-        expect(this.$ancestorNoHeight.find('span')).to.be.hidden
-        expect(this.$ancestorNoHeight.find('span')).to.not.be.visible
-      })
-
-      it('is visible when parent has positive dimensions even with overflow hidden', function () {
-        expect(this.$parentWithWidthHeightNoOverflow.find('span')).to.be.visible
-        expect(this.$parentWithWidthHeightNoOverflow.find('span')).to.not.be.hidden
-      })
-
-      it('is visible when ancestor has positive dimensions even with overflow hidden', function () {
-        expect(this.$ancestorWithWidthHeightNoOverflow.find('span')).to.be.visible
-        expect(this.$ancestorWithWidthHeightNoOverflow.find('span')).to.not.be.hidden
-      })
-    })
-
-    describe('css position', () => {
-      it('is visible if child has position: absolute', function () {
-        expect(this.$childPosAbs.find('span')).to.be.visible
-        expect(this.$childPosAbs.find('span')).not.be.hidden
-      })
-
-      it('is visible if child has position: fixed', function () {
-        expect(this.$childPosFixed.find('button')).to.be.visible
-        expect(this.$childPosFixed.find('button')).not.to.be.hidden
-      })
-
-      it('is visible if descendent from parent has position: fixed', function () {
-        expect(this.$descendentPosFixed.find('button')).to.be.visible
-        expect(this.$descendentPosFixed.find('button')).not.to.be.hidden
-      })
-
-      it('is visible if has position: fixed and descendent is found', function () {
-        expect(this.$descendantInPosFixed.find('#descendantInPosFixed')).to.be.visible
-        expect(this.$descendantInPosFixed.find('#descendantInPosFixed')).not.to.be.hidden
-      })
-
-      it('is hidden if position: fixed and covered up', function () {
-        expect(this.$coveredUpPosFixed.find('#coveredUpPosFixed')).to.be.hidden
-        expect(this.$coveredUpPosFixed.find('#coveredUpPosFixed')).not.to.be.visible
-      })
-
-      it('is hidden if position: fixed and off screen', function () {
-        expect(this.$offScreenPosFixed).to.be.hidden
-        expect(this.$offScreenPosFixed).not.to.be.visible
-      })
-
-      it('is visible if descendent from parent has position: absolute', function () {
-        expect(this.$descendentPosAbs.find('span')).to.be.visible
-        expect(this.$descendentPosAbs.find('span')).to.not.be.hidden
-      })
-
-      it('is hidden if only the parent has position absolute', function () {
-        expect(this.$parentPosAbs.find('span')).to.be.hidden
-        expect(this.$parentPosAbs.find('span')).to.not.be.visible
-      })
-
-      it('is visible if position: fixed and parent has pointer-events: none', function () {
-        expect(this.$parentPointerEventsNone.find('span')).to.be.visible
-        expect(this.$parentPointerEventsNone.find('span')).to.not.be.hidden
-      })
-
-      it('is not visible if covered when position: fixed and parent has pointer-events: none', function () {
-        expect(this.$parentPointerEventsNoneCovered.find('span')).to.be.hidden
-        expect(this.$parentPointerEventsNoneCovered.find('span')).to.not.be.visible
-      })
-
-      it('is visible if pointer-events: none and parent has position: fixed', function () {
-        expect(this.$childPointerEventsNone.find('span')).to.be.visible
-        expect(this.$childPointerEventsNone.find('span')).to.not.be.hidden
-      })
-
-      it('is visible when position: sticky', () => {
-        cy.visit('fixtures/sticky.html')
-        cy.get('#button').should('be.visible')
-      })
-    })
-
-    describe('css display', function () {
-      // https://github.com/cypress-io/cypress/issues/6183
-      it('parent is visible if display inline and child has display block', function () {
-        expect(this.$parentDisplayInlineChildDisplayBlock.find('span')).to.be.visible
-        expect(this.$parentDisplayInlineChildDisplayBlock.find('span')).to.not.be.hidden
-      })
-    })
-
-    describe('css overflow', () => {
-      it('is hidden when parent overflow auto and no width/height', function () {
-        expect(this.$parentNoWidthHeightOverflowAuto.find('span')).to.not.be.visible
-        expect(this.$parentNoWidthHeightOverflowAuto.find('span')).to.be.hidden
-      })
-
-      it('is hidden when parent overflow hidden and out of bounds to left', function () {
-        expect(this.$elOutOfParentBoundsToLeft.find('span')).to.be.hidden
-      })
-
-      it('is hidden when parent overflow hidden and out of bounds to right', function () {
-        expect(this.$elOutOfParentBoundsToRight.find('span')).to.be.hidden
-      })
-
-      it('is hidden when parent overflow hidden and out of bounds above', function () {
-        expect(this.$elOutOfParentBoundsAbove.find('span#elOutOfParentBoundsAbove')).to.be.hidden
-      })
-
-      it('is hidden when parent overflow hidden and out of bounds below', function () {
-        expect(this.$elOutOfParentBoundsBelow.find('span')).to.be.hidden
-      })
-
-      it('is hidden when parent overflow-y hidden and out of bounds', function () {
-        expect(this.$elOutOfParentWithOverflowYHiddenBounds.find('span')).to.be.hidden
-      })
-
-      it('is hidden when parent overflow-x hidden and out of bounds', function () {
-        expect(this.$elOutOfParentWithOverflowXHiddenBounds.find('span')).to.be.hidden
-      })
-
-      it('is visible when parent overflow hidden but el in a closer parent with position absolute', function () {
-        expect(this.$elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent.find('span')).to.be.visible
-      })
-
-      it('is hidden when parent flex and overflow hidden and el out of bounds', function () {
-        expect(this.$elOutOfParentWithFlexAndOverflowHiddenBounds.find('#red')).to.be.visible
-        expect(this.$elOutOfParentWithFlexAndOverflowHiddenBounds.find('#green')).to.be.visible
-        expect(this.$elOutOfParentWithFlexAndOverflowHiddenBounds.find('#blue')).to.be.hidden
-      })
-
-      it('is hidden when parent is wide and ancestor is overflow auto', function () {
-        expect(this.$elOutOfAncestorOverflowAutoBounds.find('span')).to.be.hidden
-      })
-
-      it('is hidden when parent overflow scroll and out of bounds', function () {
-        expect(this.$elOutOfScrollingParentBounds.find('span')).to.be.hidden
-      })
-
-      it('is hidden when parent absolutely positioned and overflow hidden and out of bounds', function () {
-        expect(this.$elOutOfPosAbsParentsBounds.find('span')).to.be.hidden
-      })
-
-      it('is visible when parent absolutely positioned and overflow hidden and not out of bounds', function () {
-        expect(this.$elInPosAbsParentsBounds.find('span')).to.be.visible
-      })
-
-      it('is visible when parent overflow hidden and not out of bounds', function () {
-        expect(this.$elInParentBounds.find('span')).to.be.visible
-      })
-
-      it('is hidden when parent overflow clip and height is 0', function () {
-        cy.$$('body').empty()
-
-        const el = add('<div style="height: 0; overflow: clip;"><div id="hidden">I am not visible</div></div>')
-
-        expect(el.find('#hidden')).to.be.hidden
-        reasonIs(el.find('#hidden'), 'This element `<div#hidden>` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: `hidden`, `clip`, `scroll` or `auto`')
-      })
-
-      it('is visible when parent overflow clip and height is non-0', function () {
-        cy.$$('body').empty()
-
-        const el = add('<div style="height: 5px; overflow: clip;"><div id="visible">I am visible</div></div>')
-
-        expect(el.find('#visible')).to.be.visible
-      })
-
-      it('is visible when ancestor is overflow hidden but more distant ancestor is the offset parent', function () {
-        expect(this.$elIsOutOfBoundsOfAncestorsOverflowButWithinRelativeAncestor.find('span')).to.be.visible
-      })
-
-      it('is hidden when relatively positioned outside ancestor with overflow hidden', function () {
-        expect(this.$elIsRelativeAndOutOfBoundsOfAncestorOverflow.find('span')).to.be.hidden
-      })
-
-      it('is visible when el is relatively positioned outside ancestor that does not hide overflow', function () {
-        expect(this.$elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow.find('span')).to.be.visible
-      })
-
-      it('is visible when parent is relatively positioned out of bounds but el is relatively positioned back in bounds', function () {
-        expect(this.$parentOutOfBoundsButElInBounds.find('span')).to.be.visible
-      })
-
-      it('is visible when element is statically positioned and parent element is absolutely positioned and ancestor has overflow hidden', function () {
-        cy.$$('body').empty()
-
-        const el = add(`
-          <div id="breaking-container" style="overflow: hidden">
-            <div>
-              <div style="position: absolute; bottom: 5px">
-                <button id="visible-button">Try me</button>
-              </div>
-            </div>
-          </div>
-        `)
-
-        expect(el.find('#visible-button')).to.be.visible
-      })
-
-      it('is visible when element is relatively positioned and parent element is absolutely positioned and ancestor has overflow auto', function () {
-        cy.$$('body').empty()
-
-        const el = add(`
-          <div style="height: 200px; position: relative; display: flex">
-            <div style="border: 5px solid red">
-              <div
-                id="breaking-container"
-                style="overflow: auto; border: 5px solid green"
-              >
-                <div>
-                  <h1>Example</h1>
-                  <div style="position: absolute; bottom: 5px">
-                    <button id="visible-button" style="position: relative">
-                      Try me
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        `)
-
-        expect(el.find('#visible-button')).to.be.visible
-      })
-
-      it('is hidden when parent element is absolutely position and offset parent is a decendent of the ancestor', function () {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="display: grid; grid-template-columns: 332px 1fr; grid-template-rows: 62px 1fr;">
-            <div style="overflow-y: auto;">
-              <div style="height: 297px; position: relative;">
-                <div style="height: 96px; position: absolute; left: 0; top: 0;">
-                  <a href="">test test-1</a>
-                </div>
-                <div style="height: 36px; position: absolute; left: 0; top: 96px; background-color: red;">
-                  <a href="">test test-2</a>
-                </div>
-              </div>
-            </div>
-          </div>
-        `)
-
-        cy.contains('test-2').should('not.be.visible')
-        cy.contains('test-1').should('be.visible')
-      })
-
-      it('is hidden when element is an option and the parent has overflow clip', function () {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="width: 150px; height: 20px; overflow: clip;">
-            <div style="width: 150px; height: 25px;"></div>
-            <select>
-              <optgroup label='Shinobi'>
-                <option>Naruto</option>
-              </optgroup>
-            </select>
-          </div>
-        `)
-
-        cy.get('option').should('not.be.visible').then(($el) => {
-          reasonIs($el, 'This element `<option>` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: `hidden`, `clip`, `scroll` or `auto`')
-        })
-
-        cy.get('optgroup').should('not.be.visible').then(($el) => {
-          reasonIs($el, 'This element `<optgroup>` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: `hidden`, `clip`, `scroll` or `auto`')
+          expect(fn()).to.be.true
         })
-
-        cy.get('select').should('not.be.visible').then(($el) => {
-          reasonIs($el, 'This element `<select>` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: `hidden`, `clip`, `scroll` or `auto`')
-        })
-      })
-
-      it('is visible when element is an option and the parent has overflow clip but is within the bounds', function () {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="width: 150px; height: 20px; overflow: clip;">
-            <select>
-              <optgroup label='Shinobi'>
-                <option>Naruto</option>
-              </optgroup>
-            </select>
-          </div>
-        `)
-
-        cy.get('option').should('be.visible')
-        cy.get('optgroup').should('be.visible')
-        cy.get('select').should('be.visible')
-      })
-
-      it('is visible when x direction is clip but element is visible in y direction', () => {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="overflow-x: clip">
-            <div style="height: 100px; width: 500px;">
-              <div style="height: 100px; width: 500px;"></div>
-              <input type="radio"/>
-              <label>Visible</label>
-            </div>
-          </div>
-        `)
-
-        cy.get('label').should('be.visible')
-      })
-
-      it('is hidden when x direction is hidden and y direction is coerced by browser to auto', () => {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="overflow-x: hidden">
-            <div style="height: 100px; width: 500px;">
-              <div style="height: 100px; width: 500px;"></div>
-              <input type="radio"/>
-              <label>Hidden</label>
-            </div>
-          </div>
-        `)
-
-        cy.get('label').should('not.be.visible')
-      })
-
-      it('is hidden when x direction is auto and y direction is coerced by browser to auto', () => {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="overflow-x: auto">
-            <div style="height: 100px; width: 500px;">
-              <div style="height: 100px; width: 500px;"></div>
-              <input type="radio"/>
-              <label>Hidden</label>
-            </div>
-          </div>
-        `)
-
-        cy.get('label').should('not.be.visible')
       })
 
-      it('is hidden when y direction is hidden and x direction is set to clip but coerced by browser to hidden', () => {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="overflow-x: clip; overflow-y: hidden">
-            <div style="height: 100px; width: 500px;">
-              <div style="height: 100px; width: 500px;"></div>
-              <input type="radio"/>
-              <label>Hidden</label>
-            </div>
-          </div>
-        `)
-
-        cy.get('label').should('not.be.visible')
-      })
-
-      it('is hidden when y direction is auto and x direction is set to clip but coerced by browser to hidden', () => {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="overflow-x: clip; overflow-y: auto">
-            <div style="height: 100px; width: 500px;">
-              <div style="height: 100px; width: 500px;"></div>
-              <input type="radio"/>
-              <label>Hidden</label>
-            </div>
-          </div>
-        `)
-
-        cy.get('label').should('not.be.visible')
-      })
-
-      it('is visible when x direction is clip and y direction is visible', () => {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="overflow-x: clip; overflow-y: visible">
-            <div style="height: 100px; width: 500px;">
-              <div style="height: 100px; width: 500px;"></div>
-              <input type="radio"/>
-              <label>Visible</label>
-            </div>
-          </div>
-        `)
-
-        cy.get('label').should('be.visible')
-      })
-
-      it('is hidden when y direction is overriden by setting overflow to clip', () => {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="overflow-y: visible; overflow: clip;">
-            <div style="height: 100px; width: 500px;">
-              <div style="height: 100px; width: 500px;"></div>
-              <input type="radio"/>
-              <label>Hidden</label>
-            </div>
-          </div>
-        `)
-
-        cy.get('label').should('not.be.visible')
-      })
-    })
-
-    describe('css clip-path', () => {
-      // TODO: handle clip path 'hidden' equivalents
-      it.skip('is hidden when outside of parents clip-path', function () {
-        expect(this.$parentWithClipPathAbsolutePositionElOutsideClipPath.find('span')).to.be.hidden
-      })
-
-      it('is visible when inside of parents clip-path', function () {
-        expect(this.$parentWithClipPathAbsolutePositionElInsideClipPath.find('span')).to.be.visible
-      })
-    })
-
-    describe('css transform', () => {
-      describe('element visibility by css transform', () => {
-        it('is visible when an element is translated a bit', () => {
-          const el = add(`<div style="transform: translate(10px, 10px)">Translated</div>`)
-
-          expect(el).to.be.visible
-        })
-
-        it('is visible when an element is only skewed', () => {
-          const el = add(`<div style="transform: skew(10deg, 15deg)">Skewed</div>`)
-
-          expect(el).to.be.visible
-        })
-
-        it('is visible when an element is only rotated', () => {
-          const el = add(`<div style="transform: rotate(20deg)">Rotated</div>`)
-
-          expect(el).to.be.visible
-        })
-
-        it('is visible when an element is scaled by non-zero', () => {
-          const el = add(`<div style="transform: scale(2, 3)">Scaled</div>`)
-
-          expect(el).to.be.visible
-        })
-
-        it('is visible when an element is transformed in multiple ways but not scaled to zero', () => {
-          const el = add(`<div style="transform: translate(10px, 15px) skew(30deg) rotate(30deg) scale(4, 1)">Multiple transform</div>`)
-
-          expect(el).to.be.visible
-        })
+      describe('visibility scenarios', () => {
+        describe('html and body overrides', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/empty.html')
+          })
 
-        it('is visible when an element is rotateZ(90deg)', () => {
-          const el = add(`<div style="transform: rotateZ(90deg)">rotateZ(90deg)</div>`)
+          describe('html is display none', () => {
+            beforeEach(() => {
+              cy.get('html').then(($el) => {
+                $el.css('display', 'none')
+              })
+            })
 
-          expect(el).to.be.visible
-        })
+            it('is always visible', () => {
+              expect(cy.$$('html').is(':hidden')).to.be.false
+              expect(cy.$$('html').is(':visible')).to.be.true
 
-        // https://github.com/cypress-io/cypress/issues/6745
-        it('is visible even if there is a dangling element in the tree', () => {
-          cy.visit('/fixtures/dangling-element.html')
-          cy.get('.hello')
-        })
+              expect(cy.$$('html')).not.to.be.hidden
+              expect(cy.$$('html')).to.be.visible
 
-        it('is hidden when an element is scaled to X axis in 0', () => {
-          const el = add(`<div style="transform: scaleX(0)">ScaleX(0)</div>`)
+              cy.wrap(cy.$$('html')).should('not.be.hidden')
+              cy.wrap(cy.$$('html')).should('be.visible')
+            })
+          })
 
-          expect(el).to.be.hidden
-        })
+          describe('body', () => {
+            beforeEach(() => {
+              cy.get('body').then(($el) => {
+                $el.css('display', 'none')
+              })
+            })
 
-        it('is hidden when an element is scaled to Y axis in 0', () => {
-          const el = add(`<div style="transform: scaleY(0)">ScaleY(0)</div>`)
+            it('is always visible', () => {
+              expect(cy.$$('body').is(':hidden')).to.be.false
+              expect(cy.$$('body').is(':visible')).to.be.true
 
-          expect(el).to.be.hidden
+              expect(cy.$$('body')).not.to.be.hidden
+              expect(cy.$$('body')).to.be.visible
+            })
+          })
         })
 
-        it('is hidden when an element is scaled to Z axis in 0', () => {
-          const el = add(`<div style="transform: scaleZ(0)">ScaleZ(0)</div>`)
+        describe('basic CSS properties', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/visibility/basic-css-properties.html')
+          })
 
-          expect(el).to.be.hidden
+          assertVisibilityForSections([
+            'visibility-property',
+            'display-property',
+            'opacity-property',
+            'table-elements',
+            'box-interactions',
+            'style-filters',
+            'contain-property',
+            'pointer-events-none',
+          ])
         })
 
-        it('is hidden when an element is transformed in multiple ways but scaled to 0 in one axis', () => {
-          const el = add(`<div style="transform: translate(15px, 30px) skew(20deg) rotate(40deg) scale(0, 0)">Multiple 2</div>`)
+        describe('form elements', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/visibility/form-elements.html')
+          })
 
-          expect(el).to.be.hidden
+          assertVisibilityForSections([
+            'select-and-option-elements',
+            'optgroup-elements',
+            'options-outside-select',
+            'hidden-options-within-visible-select',
+            'input-elements',
+          ])
         })
 
-        it('is hidden when an element is rotateX(90deg)', () => {
-          const el = add(`<div style="transform: rotateX(90deg)">rotateX(90deg)</div>`)
+        describe('overflow', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/visibility/overflow.html')
+          })
 
-          expect(el).to.be.hidden
+          assertVisibilityForSections([
+            'zero-dimensions-with-overflow-hidden',
+            'text-content-with-zero-dimensions',
+            'positive-dimensions-with-overflow-hidden',
+            'overflow-auto-with-zero-dimensions',
+            'mixed-dimension-scenarios',
+            'overflow-hidden',
+            'overflow-y-hidden',
+            'overflow-x-hidden',
+            'overflow-auto-scenarios',
+            'overflow-scroll-scenarios',
+            'overflow-relative-positioning',
+            'overflow-flex-container',
+            'overflow-complex-scenarios',
+            'clip-scenarios',
+            'viewport-scenarios',
+          ])
         })
 
-        it('is hidden when an element is rotateY(90deg)', () => {
-          const el = add(`<div style="transform: rotateX(90deg)">rotateY(90deg)</div>`)
+        describe('positioning', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/visibility/positioning.html')
+          })
 
-          expect(el).to.be.hidden
+          assertVisibilityForSections([
+            'position-fixed-element-covered-by-another',
+            'static-ancestor-fixed-descendant',
+            'static-parent-fixed-child',
+            'positioning-with-zero-dimensions',
+            'fixed-positioning-with-zero-dimensions',
+            'position-absolute-scenarios',
+            'position-sticky-scenarios',
+            'positioning-cousin-coverage',
+            'z-index-coverage',
+          ])
         })
 
-        it('is hidden when an element is rotateX(90deg) rotateY(90deg)', () => {
-          const el = add(`<div style="transform: rotateX(90deg) rotateY(90deg)">rotateX(90deg)</div>`)
+        describe('transforms', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/visibility/transforms.html')
+          })
 
-          expect(el).to.be.hidden
+          assertVisibilityForSections([
+            'scaling',
+            'translation',
+            'rotation',
+            'skew',
+            'matrix',
+            'perspective',
+            'multiple',
+            'multiple-3d',
+            'backface-visibility',
+          ])
         })
+      })
 
-        it('is hidden when an element is transformed in multiple ways but rotated to 90 deg in X or Y axis', () => {
-          const el = add(`<div style="transform: rotateX(90deg) skew(30deg, 50deg) translate(15px, 60px) scale(3.5)">rotateX(90deg)</div>`)
-
-          expect(el).to.be.hidden
-
-          const el2 = add(`<div style="transform: rotateY(90deg) skew(30deg, 50deg) translate(15px, 60px) scale(3.5)">rotateX(90deg)</div>`)
-
-          expect(el2).to.be.hidden
-
-          const el3 = add(`<div style="transform: rotateX(90deg) rotateY(90deg) skew(30deg, 50deg) translate(15px, 60px) scale(3.5)">rotateX(90deg)</div>`)
+      context('#getReasonIsHidden', () => {
+        const reasonIs = ($el: JQuery, str: string) => {
+          expect(dom.getReasonIsHidden($el)).to.eq(str)
+        }
 
-          expect(el3).to.be.hidden
-        })
-      })
+        describe('basic css / box model', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/visibility/basic-css-properties.html')
+          })
 
-      describe('when height/width is set', () => {
-        it('is visible when transform is not 0, but height is 0', () => {
-          const el = add('<div style="transform: translate(0, 0); height: 0;">Text</div>')
+          it('has `display: none`', function () {
+            prepareFixtureSection('display-property')
+            cy.get('[cy-section="display-property"] .testCase[cy-expect="hidden"]:first').then(($el) => {
+              reasonIs($el, 'This element `<div.testCase>` is not visible because it has CSS property: `display: none`')
+            })
+          })
 
-          expect(el).to.be.visible
-        })
+          it('has a parent with `display: none`', function () {
+            prepareFixtureSection('display-property')
+            cy.get('[cy-section="display-property"] .testCase[cy-expect="hidden"] span').then(($el) => {
+              reasonIs($el, 'This element `<span.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `display: none`')
+            })
+          })
 
-        it('is visible when transform is not 0, but width is 0', () => {
-          const el = add('<p style="transform: rotateX(30deg); width: 0;">Text</p>')
+          it('has `visibility: hidden`', function () {
+            prepareFixtureSection('visibility-property')
+            cy.get('[cy-section="visibility-property"] .testCase[cy-expect="hidden"]').then((el) => {
+              reasonIs($(el).first(), 'This element `<div.testCase>` is not visible because it has CSS property: `visibility: hidden`')
+            })
+          })
 
-          expect(el).to.be.visible
-        })
+          it('has parent with `visibility: hidden`', function () {
+            prepareFixtureSection('visibility-property')
+            cy.get('[cy-section="visibility-property"] .testCase[cy-expect="hidden"] button').then((el) => {
+              reasonIs($(el).first(), 'This element `<button.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `visibility: hidden`')
+            })
+          })
 
-        it('is visible when parent transform is not 0, but height is 0', () => {
-          const el = add('<div style="transform: translate(0, 0); height: 0;"><p id="tr-p-0">Text</p></div>')
+          it('has `visibility: collapse`', function () {
+            prepareFixtureSection('table-elements')
+            cy.get('[cy-section="table-elements"] td[style*="visibility: collapse"]').then(($el) => {
+              reasonIs($el, 'This element `<td.testCase>` is not visible because it has CSS property: `visibility: collapse`')
+            })
+          })
 
-          expect(el.find('#tr-p-0')).to.be.visible
-        })
+          it('has parent with `visibility: collapse`', function () {
+            prepareFixtureSection('table-elements')
+            cy.get('[cy-section="table-elements"] tr[style*="visibility: collapse"] td').then(($el) => {
+              reasonIs($el, 'This element `<td.testCase>` is not visible because its parent `<tr.testCase>` has CSS property: `visibility: collapse`')
+            })
+          })
 
-        it('is visible when parent transform is not 0, but width is 0', () => {
-          const el = add('<div style="transform: translate(0, 0); height: 0%;"><p id="tr-p-1">Test</p></div>')
+          it('has `opacity: 0`', function () {
+            prepareFixtureSection('opacity-property')
+            cy.get('[cy-section="opacity-property"] .testCase[cy-expect="hidden"]').then(($el) => {
+              reasonIs($($el).first(), 'This element `<div.testCase>` is not visible because it has CSS property: `opacity: 0`')
+            })
+          })
 
-          expect(el.find('#tr-p-1')).to.be.visible
+          it('has parent with `opacity: 0`', function () {
+            prepareFixtureSection('opacity-property')
+            cy.get('[cy-section="opacity-property"] .testCase[cy-expect="hidden"] button').then(($el) => {
+              reasonIs($el, 'This element `<button.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `opacity: 0`')
+            })
+          })
         })
 
-        it('is invisible when parent transform is 0, but height is not 0', () => {
-          const el = add('<div style="transform: scaleX(0); height: 10px"><p id="tr-p-2">Test</p></div>')
+        it('is detached from the DOM', function () {
+          const divDetached = $('<div>Detached</div>')
 
-          expect(el.find('#tr-p-2')).to.be.hidden
+          reasonIs(divDetached, 'This element `<div>` is not visible because it is detached from the DOM')
         })
 
-        describe('invisible when overflow: hidden', () => {
-          it('height: 0 + overflow', () => {
-            const el = add('<div style="height: 0px; transform: translate(1, 2); overflow: hidden"><p id="h0th">Test</p></div>')
-
-            expect(el.find('#h0th')).to.be.hidden
+        describe('overflow-related', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/visibility/overflow.html')
           })
 
-          it('height: 0 + overflow-x', () => {
-            const el = add('<div style="height: 0px; transform: translate(1, 2); overflow-x: hidden"><p id="h0th">Test</p></div>')
-
-            expect(el.find('#h0th')).to.be.hidden
+          it('has effective zero width', function () {
+            prepareFixtureSection('zero-dimensions-with-overflow-hidden')
+            cy.get('[cy-section="zero-dimensions-with-overflow-hidden"] .testCase[cy-label="Zero width ancestor, parent, self"]').then(($el) => {
+              reasonIs($el, 'This element `<div.testCase>` is not visible because it has an effective width and height of: `0 x 100` pixels.')
+            })
           })
 
-          it('height: 0 + overflow-y', () => {
-            const el = add('<div style="height: 0px; transform: translate(1, 2); overflow-y: hidden"><p id="h0th">Test</p></div>')
-
-            expect(el.find('#h0th')).to.be.hidden
+          it('has effective zero height', function () {
+            prepareFixtureSection('zero-dimensions-with-overflow-hidden')
+            cy.get('[cy-section="zero-dimensions-with-overflow-hidden"] .testCase[cy-label="Zero height ancestor, parent, self"]').then(($el) => {
+              reasonIs($el, 'This element `<div.testCase>` is not visible because it has an effective width and height of: `100 x 0` pixels.')
+            })
           })
 
-          it('width: 0 + overflow', () => {
-            const el = add('<div style="width: 0px; transform: translate(1, 2); overflow: hidden"><p id="h0th">Test</p></div>')
-
-            expect(el.find('#h0th')).to.be.hidden
+          it('has a parent with an effective zero width and overflow: hidden', function () {
+            prepareFixtureSection('zero-dimensions-with-overflow-hidden')
+            cy.get('[cy-section="zero-dimensions-with-overflow-hidden"] .testCase[cy-label="Zero height ancestor, parent, self"] span').then(($el) => {
+              reasonIs($el, 'This element `<span.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `overflow: hidden` and an effective width and height of: `100 x 0` pixels.')
+            })
           })
 
-          it('width: 0 + overflow-x', () => {
-            const el = add('<div style="width: 0px; transform: translate(1, 2); overflow-x: hidden"><p id="h0th">Test</p></div>')
-
-            expect(el.find('#h0th')).to.be.hidden
+          it('element sits outside boundaries of parent with overflow clipping', function () {
+            prepareFixtureSection('overflow-hidden')
+            cy.get('[cy-section="overflow-hidden"] .testCase[cy-label="Element out of bounds right"]').then(($el) => {
+              reasonIs($el, 'This element `<div.testCase>` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: `hidden`, `clip`, `scroll` or `auto`')
+            })
           })
+        })
 
-          it('width: 0 + overflow-y', () => {
-            const el = add('<div style="width: 0px; transform: translate(1, 2); overflow-y: hidden"><p id="h0th">Test</p></div>')
-
-            expect(el.find('#h0th')).to.be.hidden
+        it('is hidden because it is backface', function () {
+          cy.visit('/fixtures/visibility/transforms.html')
+          prepareFixtureSection('backface-visibility')
+          cy.get('[cy-section="backface-visibility"] .testCase[cy-label="RotateX 180deg with hidden backface"]').then(($el) => {
+            reasonIs($el, 'This element `<div.testCase>` is not visible because it is rotated and its backface is hidden.')
           })
         })
-      })
-
-      it('is hidden when outside parents transform scale', function () {
-        expect(this.$parentWithTransformScaleElOutsideScale.find('span')).to.be.hidden
-      })
-
-      it('is visible when inside of parents transform scale', function () {
-        expect(this.$parentWithTransformScaleElInsideScale.find('span')).to.be.visible
-      })
-
-      it('is hidden when out of ancestor\'s bounds due to ancestor\'s transform', function () {
-        expect(this.$ancestorTransformMakesElOutOfBoundsOfAncestor.find('span')).to.be.hidden
-      })
-
-      it('is visible when in ancestor\'s bounds due to ancestor\'s transform', function () {
-        expect(this.$ancestorTransformMakesElInBoundsOfAncestor.find('#inbounds')).to.be.visible
-      })
-    })
-
-    describe('#getReasonIsHidden', () => {
-      it('has `display: none`', function () {
-        reasonIs(this.$displayNone, 'This element `<button>` is not visible because it has CSS property: `display: none`')
-      })
-
-      it('has a parent with `display: none`', function () {
-        reasonIs(this.$parentDisplayNone.find('span'), 'This element `<span>` is not visible because its parent `<div#none>` has CSS property: `display: none`')
-      })
-
-      it('has `visibility: hidden`', function () {
-        reasonIs(this.$visHidden, 'This element `<ul>` is not visible because it has CSS property: `visibility: hidden`')
-      })
-
-      it('has parent with `visibility: hidden`', function () {
-        reasonIs(this.$parentVisHidden.find('button'), 'This element `<button>` is not visible because its parent `<div.invis>` has CSS property: `visibility: hidden`')
-      })
-
-      it('has `visibility: collapse`', function () {
-        reasonIs(this.$tableVisCollapse.find('td.collapse'), 'This element `<td.collapse>` is not visible because it has CSS property: `visibility: collapse`')
-      })
 
-      it('has parent with `visibility: collapse`', function () {
-        reasonIs(this.$tableVisCollapse.find('tr.collapse td:first'), 'This element `<td>` is not visible because its parent `<tr.collapse>` has CSS property: `visibility: collapse`')
-      })
-
-      it('has `opacity: 0`', function () {
-        reasonIs(this.$btnOpacityZero, 'This element `<button>` is not visible because it has CSS property: `opacity: 0`')
-      })
-
-      it('has parent with `opacity: 0`', function () {
-        reasonIs(this.$parentOpacityZero.find('button'), 'This element `<button>` is not visible because its parent `<div>` has CSS property: `opacity: 0`')
-      })
-
-      it('is detached from the DOM', function () {
-        reasonIs(this.$divDetached, 'This element `<div>` is not visible because it is detached from the DOM')
-      })
-
-      it('has effective zero width', function () {
-        reasonIs(this.$divNoWidth, 'This element `<div>` is not visible because it has an effective width and height of: `0 x 100` pixels.')
-      })
-
-      it('has effective zero height', function () {
-        reasonIs(this.$divNoHeight, 'This element `<div>` is not visible because it has an effective width and height of: `50 x 0` pixels.')
-      })
-
-      it('has a parent with an effective zero width and overflow: hidden', function () {
-        reasonIs(this.$parentNoHeight.find('span'), 'This element `<span>` is not visible because its parent `<div>` has CSS property: `overflow: hidden` and an effective width and height of: `100 x 0` pixels.')
-      })
-
-      it('element sits outside boundaries of parent with overflow clipping', function () {
-        reasonIs(this.$elOutOfParentBoundsToRight.find('span'), 'This element `<span>` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: `hidden`, `clip`, `scroll` or `auto`')
-      })
-
-      it('is hidden because it is backface', function () {
-        const el = cy.$$('body').append(`<div id="backface-invisible" style="backface-visibility:hidden; transform: rotateX(180deg)">Hello world</div>`)
-
-        reasonIs(el.find('#backface-invisible'), `This element \`<div#backface-invisible>\` is not visible because it is rotated and its backface is hidden.`)
-      })
-
-      it('is hidden by transform', function () {
-        const el = cy.$$('body').append(`<div id="invisible-transform" style="transform: scaleX(0)">Hello world</div>`)
+        it('is hidden by transform', function () {
+          cy.visit('/fixtures/visibility/transforms.html')
+          prepareFixtureSection('scaling')
+          cy.get('[cy-section="scaling"] .testCase[cy-label="ScaleX to zero"]').then(($el) => {
+            reasonIs($el, 'This element `<div.testCase>` is not visible because it is hidden by transform.')
+          })
+        })
 
-        reasonIs(el.find('#invisible-transform'), `This element \`<div#invisible-transform>\` is not visible because it is hidden by transform.`)
-      })
+        it('element is fixed and being covered', function () {
+          cy.visit('/fixtures/visibility/positioning.html')
+          prepareFixtureSection('position-fixed-element-covered-by-another')
+          cy.get('[cy-section="position-fixed-element-covered-by-another"] .testCase[cy-label="Fixed positioned element covered by another"]').then(($el) => {
+            reasonIs($el, 'This element `<div.testCase>` is not visible because it has CSS property: `position: fixed` and it\'s being covered by another element:\n\n`<div class="testCase" cy-expect="visible" cy-label="Element covering fixed positioned element" style="position: fixed; bottom: 0; left: 0; background: lightskyblue; width: 100px; height: 100px;">on top</div>`')
+          })
+        })
 
-      it('element is fixed and being covered', function () {
-        reasonIs(this.$coveredUpPosFixed.find('#coveredUpPosFixed'), `\This element \`<div#coveredUpPosFixed>\` is not visible because it has CSS property: \`position: fixed\` and it's being covered by another element:\n\n\`<div style="position: fixed; bottom: 0; left: 0">on top</div>\``)
-      })
+        it('needs scroll', function () {
+          cy.visit('/fixtures/visibility/empty.html')
+          const el = cy.$$('body').append(`
+              <div style="position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto;">
+                <div style="height: 800px">Big Element</div>
+                <button id="needsScroll">MyButton</button>
+              </div>
+            `)
 
-      it('needs scroll', function () {
-        const el = cy.$$('body').append(`
-          <div style="position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto;">
-            <div style="height: 800px">Big Element</div>
-            <button id="needsScroll">MyButton</button>
-          </div>
-        `)
+          reasonIs(el.find('#needsScroll'), `This element \`<button#needsScroll>\` is not visible because its ancestor has \`position: fixed\` CSS property and it is overflowed by other elements. How about scrolling to the element with \`cy.scrollIntoView()\`?`)
+        })
 
-        reasonIs(el.find('#needsScroll'), `This element \`<button#needsScroll>\` is not visible because its ancestor has \`position: fixed\` CSS property and it is overflowed by other elements. How about scrolling to the element with \`cy.scrollIntoView()\`?`)
-      })
+        it('cannot determine why element is not visible', function () {
+          // this element is actually visible
+          // but used here as an example that does not match any of the above
+          const visible = cy.$$('<div>Visible</div>')
 
-      it('cannot determine why element is not visible', function () {
-        // this element is actually visible
-        // but used here as an example that does not match any of the above
-        reasonIs(this.$divVisible, 'This element `<div>` is not visible.')
+          cy.$$('body').append(visible)
+          reasonIs(visible, 'This element `<div>` is not visible.')
+        })
       })
     })
-  })
+  }
 })
diff --git a/packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts b/packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts
index 974a909d57d..623b3a42853 100644
--- a/packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts
@@ -5,62 +5,69 @@ const { $ } = Cypress
 describe('src/cypress/dom/visibility - shadow dom', () => {
   let add: (el: string, shadowEl: string, rootIdentifier: string) => JQuery<HTMLElement>
 
-  beforeEach(() => {
-    cy.visit('/fixtures/empty.html').then((win) => {
-      win.customElements.define('shadow-root', class extends win.HTMLElement {
-        constructor () {
-          super()
-
-          this.attachShadow({ mode: 'open' })
-          this.style.display = 'block'
-        }
+  // #TODO: support shadow dom in fast visibility algorithm
+  const modes = ['legacy']
+
+  for (const mode of modes) {
+    describe(`${mode}`, {
+      experimentalFastVisibility: mode === 'fast',
+    }, () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/empty.html').then((win) => {
+          win.customElements.define('shadow-root', class extends win.HTMLElement {
+            constructor () {
+              super()
+
+              this.attachShadow({ mode: 'open' })
+              this.style.display = 'block'
+            }
+          })
+
+          add = (el, shadowEl, rootIdentifier) => {
+            const $el = $(el).appendTo(cy.$$('body'))
+
+            $(shadowEl).appendTo(cy.$$(rootIdentifier)[0].shadowRoot!)
+
+            return $el
+          }
+
+          // ensure all tests run against a scrollable window
+          const scrollThisIntoView = $(`<div style='height: 1000px; width: 10px;'></div><div>Should be in view</div>`).appendTo(cy.$$('body'))
+
+          // scroll the 2nd element into view so that
+          // there is always a scrollTop so we ensure
+          // its factored in (window vs viewport) calculations
+          scrollThisIntoView.get(1).scrollIntoView()
+        })
       })
 
-      add = (el, shadowEl, rootIdentifier) => {
-        const $el = $(el).appendTo(cy.$$('body'))
-
-        $(shadowEl).appendTo(cy.$$(rootIdentifier)[0].shadowRoot!)
-
-        return $el
-      }
-
-      // ensure all tests run against a scrollable window
-      const scrollThisIntoView = $(`<div style='height: 1000px; width: 10px;'></div><div>Should be in view</div>`).appendTo(cy.$$('body'))
-
-      // scroll the 2nd element into view so that
-      // there is always a scrollTop so we ensure
-      // its factored in (window vs viewport) calculations
-      scrollThisIntoView.get(1).scrollIntoView()
-    })
-  })
-
-  describe('css visibility', () => {
-    it('is hidden if parent is shadow root and has .css(visibility) hidden', () => {
-      const $shadowRootVisHidden = add(
+      describe('css visibility', () => {
+        it('is hidden if parent is shadow root and has .css(visibility) hidden', () => {
+          const $shadowRootVisHidden = add(
         `<shadow-root id="shadow-root-vis-hidden" style="visibility: hidden;"></shadow-root>`,
         `<button>parent visibility: hidden</button>`,
         '#shadow-root-vis-hidden',
-      )
+          )
 
-      cy.wrap($shadowRootVisHidden).find('button', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($shadowRootVisHidden).find('button', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($shadowRootVisHidden).find('button', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($shadowRootVisHidden).find('button', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden if parent outside of shadow dom has .css(visibility) hidden', () => {
-      const $outsideParentVisHidden = add(
+        it('is hidden if parent outside of shadow dom has .css(visibility) hidden', () => {
+          const $outsideParentVisHidden = add(
         `<div style="visibility: hidden;">
           <shadow-root id="outside-parent-vis-hidden"></shadow-root>
         </div>`,
         `<button>parent visibility: hidden</button>`,
         '#outside-parent-vis-hidden',
-      )
+          )
 
-      cy.wrap($outsideParentVisHidden).find('button', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($outsideParentVisHidden).find('button', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($outsideParentVisHidden).find('button', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($outsideParentVisHidden).find('button', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden if parent outside of shadow dom has visibility collapse', () => {
-      const $outsideParentVisCollapse = add(
+        it('is hidden if parent outside of shadow dom has visibility collapse', () => {
+          const $outsideParentVisCollapse = add(
         `<table>
           <tr>
             <td>Naruto</td>
@@ -70,29 +77,29 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </table>`,
         `<span id='collapse-span'>Sasuke</span>`,
         '#outside-parent-vis-collapse',
-      )
+          )
 
-      cy.wrap($outsideParentVisCollapse).find('#collapse-span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($outsideParentVisCollapse).find('#collapse-span', { includeShadowDom: true }).should('not.be.visible')
-    })
-  })
+          cy.wrap($outsideParentVisCollapse).find('#collapse-span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($outsideParentVisCollapse).find('#collapse-span', { includeShadowDom: true }).should('not.be.visible')
+        })
+      })
 
-  describe('width and height', () => {
-    it('is hidden if parent is shadow root and has overflow: hidden and no width', () => {
-      const $shadowRootNoWidth = add(
+      describe('width and height', () => {
+        it('is hidden if parent is shadow root and has overflow: hidden and no width', () => {
+          const $shadowRootNoWidth = add(
         `<shadow-root id="shadow-root-no-width" style='width: 0; height: 100px; overflow: hidden;'></shadow-root>`,
         `<div style='height: 500px; width: 500px;'>
           <span>parent width: 0</span>
         </div>`,
         '#shadow-root-no-width',
-      )
+          )
 
-      cy.wrap($shadowRootNoWidth).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($shadowRootNoWidth).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($shadowRootNoWidth).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($shadowRootNoWidth).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden if parent outside of shadow dom has overflow: hidden and no width', () => {
-      const $outsideParentNoWidth = add(
+        it('is hidden if parent outside of shadow dom has overflow: hidden and no width', () => {
+          const $outsideParentNoWidth = add(
         `<div style='width: 0; height: 100px; overflow: hidden;'>
           <shadow-root id="outside-parent-no-width"></shadow-root>
         </div>`,
@@ -100,27 +107,27 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <span>parent width: 0</span>
         </div>`,
         '#outside-parent-no-width',
-      )
+          )
 
-      cy.wrap($outsideParentNoWidth).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($outsideParentNoWidth).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($outsideParentNoWidth).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($outsideParentNoWidth).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden if parent is shadow root and has overflow: hidden and no height', () => {
-      const $shadowRootNoHeight = add(
+        it('is hidden if parent is shadow root and has overflow: hidden and no height', () => {
+          const $shadowRootNoHeight = add(
         `<shadow-root id="shadow-root-no-height" style='width: 100px; height: 0; overflow: hidden;'></shadow-root>`,
         `<div style='height: 500px; width: 500px;'>
           <span>parent height: 0</span>
         </div>`,
         '#shadow-root-no-height',
-      )
+          )
 
-      cy.wrap($shadowRootNoHeight).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($shadowRootNoHeight).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($shadowRootNoHeight).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($shadowRootNoHeight).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden if parent outside of shadow dom has overflow: hidden and no height', () => {
-      const $outsideParentNoHeight = add(
+        it('is hidden if parent outside of shadow dom has overflow: hidden and no height', () => {
+          const $outsideParentNoHeight = add(
         `<div style='width: 100px; height: 0; overflow: hidden;'>
           <shadow-root id="outside-parent-no-height"></shadow-root>
         </div>`,
@@ -128,16 +135,16 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <span>parent height: 0</span>
         </div>`,
         '#outside-parent-no-height',
-      )
+          )
 
-      cy.wrap($outsideParentNoHeight).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($outsideParentNoHeight).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
-  })
+          cy.wrap($outsideParentNoHeight).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($outsideParentNoHeight).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
+      })
 
-  describe('css position', () => {
-    it('is visible if child has position: absolute', () => {
-      const $childPosAbs = add(
+      describe('css position', () => {
+        it('is visible if child has position: absolute', () => {
+          const $childPosAbs = add(
         `<div style='width: 0; height: 100px; overflow: hidden;'>
           <shadow-root id="child-pos-absolute"></shadow-root>
         </div>`,
@@ -145,14 +152,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <span style="position: absolute;">position: absolute</span>
         </div>`,
         '#child-pos-absolute',
-      )
+          )
 
-      cy.wrap($childPosAbs).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($childPosAbs).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($childPosAbs).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($childPosAbs).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible if child has position: fixed', () => {
-      const $childPosFixed = add(
+        it('is visible if child has position: fixed', () => {
+          const $childPosFixed = add(
         `<div style='width: 0; height: 100px; overflow: hidden;'>
           <shadow-root id="child-pos-fixed"></shadow-root>
         </div>`,
@@ -160,14 +167,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <button style="position: fixed; top: 0;">position: fixed</button>
         </div>`,
         '#child-pos-fixed',
-      )
+          )
 
-      cy.wrap($childPosFixed).find('button', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($childPosFixed).find('button', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($childPosFixed).find('button', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($childPosFixed).find('button', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible if descendent from parent has position: absolute and descendent is outside shadow dom', () => {
-      const $descendentPosAbsOutside = add(
+        it('is visible if descendent from parent has position: absolute and descendent is outside shadow dom', () => {
+          const $descendentPosAbsOutside = add(
         `<div style='width: 0; height: 100px; overflow: hidden;'>
           <div style='height: 500px; width: 500px; position: absolute;'>
             <shadow-root id="descendent-pos-abs-outside"></shadow-root>
@@ -175,14 +182,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span>no width, descendant position: absolute</span>`,
         '#descendent-pos-abs-outside',
-      )
+          )
 
-      cy.wrap($descendentPosAbsOutside).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($descendentPosAbsOutside).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($descendentPosAbsOutside).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($descendentPosAbsOutside).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible if descendent from parent has position: absolute and descendent is inside shadow dom', () => {
-      const $descendentPosAbsInside = add(
+        it('is visible if descendent from parent has position: absolute and descendent is inside shadow dom', () => {
+          const $descendentPosAbsInside = add(
         `<div style='width: 0; height: 100px; overflow: hidden;'>
           <shadow-root id="descendent-pos-abs-inside"></shadow-root>
         </div>`,
@@ -190,14 +197,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <span>no width, descendant position: absolute</span>
         </div>`,
         '#descendent-pos-abs-inside',
-      )
+          )
 
-      cy.wrap($descendentPosAbsInside).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($descendentPosAbsInside).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($descendentPosAbsInside).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($descendentPosAbsInside).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible if descendent from parent has position: fixed and descendent is outside shadow dom', () => {
-      const $descendentPosFixedOutside = add(
+        it('is visible if descendent from parent has position: fixed and descendent is outside shadow dom', () => {
+          const $descendentPosFixedOutside = add(
         `<div style='width: 0; height: 100px; overflow: hidden;'>
           <div style='height: 500px; width: 500px; position: fixed; top: 0; right: 0;'>
             <shadow-root id="descendent-pos-fixed-outside"></shadow-root>
@@ -205,14 +212,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<button>no width, descendant position: fixed</button>`,
         '#descendent-pos-fixed-outside',
-      )
+          )
 
-      cy.wrap($descendentPosFixedOutside).find('button', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($descendentPosFixedOutside).find('button', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($descendentPosFixedOutside).find('button', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($descendentPosFixedOutside).find('button', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible if descendent from parent has position: fixed and descendent is inside shadow dom', () => {
-      const $descendentPosFixedInside = add(
+        it('is visible if descendent from parent has position: fixed and descendent is inside shadow dom', () => {
+          const $descendentPosFixedInside = add(
         `<div style='width: 0; height: 100px; overflow: hidden;'>
           <shadow-root id="descendent-pos-fixed-inside"></shadow-root>
         </div>`,
@@ -220,162 +227,162 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <button>no width, descendant position: fixed</button>
         </div>`,
         '#descendent-pos-fixed-inside',
-      )
+          )
 
-      cy.wrap($descendentPosFixedInside).find('button', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($descendentPosFixedInside).find('button', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($descendentPosFixedInside).find('button', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($descendentPosFixedInside).find('button', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is hidden if position: fixed and covered by element outside of shadow dom', () => {
-      const $coveredUpByOutsidePosFixed = add(
+        it('is hidden if position: fixed and covered by element outside of shadow dom', () => {
+          const $coveredUpByOutsidePosFixed = add(
         `<div>
           <shadow-root id="covered-up-by-outside-pos-fixed"></shadow-root>
           <div style="position: fixed; bottom: 0; left: 0">on top</div>
         </div>`,
         `<div id="inside-underneath" style="position: fixed; bottom: 0; left: 0">underneath</div>`,
         '#covered-up-by-outside-pos-fixed',
-      )
+          )
 
-      cy.wrap($coveredUpByOutsidePosFixed).find('#inside-underneath', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($coveredUpByOutsidePosFixed).find('#inside-underneath', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($coveredUpByOutsidePosFixed).find('#inside-underneath', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($coveredUpByOutsidePosFixed).find('#inside-underneath', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden if outside of shadow dom with position: fixed and covered by element inside of shadow dom', () => {
-      const $coveredUpByShadowPosFixed = add(
+        it('is hidden if outside of shadow dom with position: fixed and covered by element inside of shadow dom', () => {
+          const $coveredUpByShadowPosFixed = add(
         `<div>
           <div id="outside-underneath" style="position: fixed; bottom: 0; left: 0">underneath</div>
           <shadow-root id="covered-up-by-shadow-pos-fixed"></shadow-root>
         </div>`,
         `<div style="position: fixed; bottom: 0; left: 0">on top</div>`,
         '#covered-up-by-shadow-pos-fixed',
-      )
+          )
 
-      cy.wrap($coveredUpByShadowPosFixed).find('#outside-underneath', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($coveredUpByShadowPosFixed).find('#outside-underneath', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($coveredUpByShadowPosFixed).find('#outside-underneath', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($coveredUpByShadowPosFixed).find('#outside-underneath', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is visible if position: fixed and parent outside shadow dom has pointer-events: none', () => {
-      const $parentPointerEventsNone = add(
+        it('is visible if position: fixed and parent outside shadow dom has pointer-events: none', () => {
+          const $parentPointerEventsNone = add(
         `<div style="pointer-events: none;">
           <shadow-root id="parent-pointer-events-none"></shadow-root>
         </div>`,
         `<span style="position: fixed; top: 20px;">parent pointer-events: none</span>`,
         '#parent-pointer-events-none',
-      )
+          )
 
-      cy.wrap($parentPointerEventsNone).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($parentPointerEventsNone).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($parentPointerEventsNone).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($parentPointerEventsNone).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is hidden if covered when position: fixed and parent outside shadow dom has pointer-events: none', () => {
-      const $parentPointerEventsNoneCovered = add(
+        it('is hidden if covered when position: fixed and parent outside shadow dom has pointer-events: none', () => {
+          const $parentPointerEventsNoneCovered = add(
         `<div style="pointer-events: none;">
           <shadow-root id="parent-pointer-events-none-covered"></shadow-root>
         </div>
         <span style="position: fixed; top: 40px; background: red;">covering the element with pointer-events: none</span>`,
         `<span style="position: fixed; top: 40px;">parent pointer-events: none</span>`,
         '#parent-pointer-events-none-covered',
-      )
+          )
 
-      cy.wrap($parentPointerEventsNoneCovered).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($parentPointerEventsNoneCovered).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($parentPointerEventsNoneCovered).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($parentPointerEventsNoneCovered).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is visible if pointer-events: none and parent outside shadow dom has position: fixed', () => {
-      const $childPointerEventsNone = add(
+        it('is visible if pointer-events: none and parent outside shadow dom has position: fixed', () => {
+          const $childPointerEventsNone = add(
         `<div style="position: fixed; top: 60px;">
           <shadow-root id="child-pointer-events-none-covered"></shadow-root>
         </div>`,
         `<span style="pointer-events: none;">child pointer-events: none</span>`,
         '#child-pointer-events-none-covered',
-      )
+          )
 
-      cy.wrap($childPointerEventsNone).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($childPointerEventsNone).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
-  })
+          cy.wrap($childPointerEventsNone).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($childPointerEventsNone).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
+      })
 
-  describe('css overflow', () => {
-    it('is hidden when parent outside of shadow dom overflow hidden and out of bounds to left', () => {
-      const $elOutOfParentBoundsToLeft = add(
+      describe('css overflow', () => {
+        it('is hidden when parent outside of shadow dom overflow hidden and out of bounds to left', () => {
+          const $elOutOfParentBoundsToLeft = add(
         `<div style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
           <shadow-root id="el-out-of-parent-bounds-to-left"></shadow-root>
         </div>`,
         `<span style='position: absolute; width: 100px; height: 100px; left: -100px; top: 0;'>position: absolute, out of bounds left</span>`,
         '#el-out-of-parent-bounds-to-left',
-      )
+          )
 
-      cy.wrap($elOutOfParentBoundsToLeft).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfParentBoundsToLeft).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfParentBoundsToLeft).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfParentBoundsToLeft).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent outside of shadow dom overflow hidden and out of bounds to right', () => {
-      const $elOutOfParentBoundsToRight = add(
+        it('is hidden when parent outside of shadow dom overflow hidden and out of bounds to right', () => {
+          const $elOutOfParentBoundsToRight = add(
         `<div style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
           <shadow-root id="el-out-of-parent-bounds-to-right"></shadow-root>
         </div>`,
         `<span style='position: absolute; width: 100px; height: 100px; right: -100px; top: 0;'>position: absolute, out of bounds right</span>`,
         '#el-out-of-parent-bounds-to-right',
-      )
+          )
 
-      cy.wrap($elOutOfParentBoundsToRight).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfParentBoundsToRight).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfParentBoundsToRight).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfParentBoundsToRight).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent outside of shadow dom overflow hidden and out of bounds above', () => {
-      const $elOutOfParentBoundsAbove = add(
+        it('is hidden when parent outside of shadow dom overflow hidden and out of bounds above', () => {
+          const $elOutOfParentBoundsAbove = add(
         `<div style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
           <shadow-root id="el-out-of-parent-bounds-above"></shadow-root>
         </div>`,
         `<span style='position: absolute; width: 100px; height: 100px; top: -100px; left: 0;'>position: absolute, out of bounds above</span>`,
         '#el-out-of-parent-bounds-above',
-      )
+          )
 
-      cy.wrap($elOutOfParentBoundsAbove).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfParentBoundsAbove).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfParentBoundsAbove).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfParentBoundsAbove).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent outside of shadow dom overflow hidden and out of bounds below', () => {
-      const $elOutOfParentBoundsBelow = add(
+        it('is hidden when parent outside of shadow dom overflow hidden and out of bounds below', () => {
+          const $elOutOfParentBoundsBelow = add(
         `<div style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
           <shadow-root id="el-out-of-parent-bounds-below"></shadow-root>
         </div>`,
         `<span style='position: absolute; width: 100px; height: 100px; bottom: -100px; left: 0;'>position: absolute, out of bounds below</span>`,
         '#el-out-of-parent-bounds-below',
-      )
+          )
 
-      cy.wrap($elOutOfParentBoundsBelow).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfParentBoundsBelow).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfParentBoundsBelow).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfParentBoundsBelow).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent outside of shadow dom overflow hidden-y and out of bounds', () => {
-      const $elOutOfParentWithOverflowYHiddenBounds = add(
+        it('is hidden when parent outside of shadow dom overflow hidden-y and out of bounds', () => {
+          const $elOutOfParentWithOverflowYHiddenBounds = add(
         `<div style='width: 100px; height: 100px; overflow-y: hidden; position: relative;'>
           <shadow-root id="el-out-of-parent-with-overflow-y-hidden-bounds"></shadow-root>
         </div>`,
         `<span style='position: absolute; top: 200px; left: 0;'>position: absolute, out of bounds below</span>`,
         '#el-out-of-parent-with-overflow-y-hidden-bounds',
-      )
+          )
 
-      cy.wrap($elOutOfParentWithOverflowYHiddenBounds).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfParentWithOverflowYHiddenBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfParentWithOverflowYHiddenBounds).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfParentWithOverflowYHiddenBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent outside of shadow dom overflow hidden-x and out of bounds', () => {
-      const $elOutOfParentWithOverflowXHiddenBounds = add(
+        it('is hidden when parent outside of shadow dom overflow hidden-x and out of bounds', () => {
+          const $elOutOfParentWithOverflowXHiddenBounds = add(
         `<div style='width: 100px; height: 100px; overflow-x: hidden; position: relative;'>
           <shadow-root id="el-out-of-parent-with-overflow-x-hidden-bounds"></shadow-root>
         </div>`,
         `<span style='position: absolute; top: 0; left: 200px;'>position: absolute, out of bounds below</span>`,
         '#el-out-of-parent-with-overflow-x-hidden-bounds',
-      )
+          )
 
-      cy.wrap($elOutOfParentWithOverflowXHiddenBounds).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfParentWithOverflowXHiddenBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfParentWithOverflowXHiddenBounds).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfParentWithOverflowXHiddenBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is visible when parent overflow hidden but el in a closer parent outside of shadow dom with position absolute', () => {
-      const $elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent = add(
+        it('is visible when parent overflow hidden but el in a closer parent outside of shadow dom with position absolute', () => {
+          const $elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent = add(
         `<div style="border: 1px solid red; width: 200px; height: 200px; overflow: hidden;">
           <div style="position: absolute; left: 300px; border: 1px solid blue; width: 200px; height: 200px;">
             <shadow-root id="el-out-of-parent-with-overflow-hidden-bounds-but-closer-position-absolute-parent"></shadow-root>
@@ -383,14 +390,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span style="border: 1px solid green;">Hello</span>`,
         '#el-out-of-parent-with-overflow-hidden-bounds-but-closer-position-absolute-parent',
-      )
+          )
 
-      cy.wrap($elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is hidden when parent is wide and ancestor outside shadow dom is overflow auto', () => {
-      const $elOutOfAncestorOverflowAutoBoundsOutside = add(
+        it('is hidden when parent is wide and ancestor outside shadow dom is overflow auto', () => {
+          const $elOutOfAncestorOverflowAutoBoundsOutside = add(
         `<div style='width: 100px; height: 100px; overflow: auto;'>
           <div style='width: 1000px; position: relative;'>
             <shadow-root id="el-out-of-ancestor-overflow-auto-bounds-outside"></shadow-root>
@@ -398,14 +405,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span style='position: absolute; left: 300px; top: 0px;'>out of bounds, parent wide, ancestor overflow: auto</span>`,
         '#el-out-of-ancestor-overflow-auto-bounds-outside',
-      )
+          )
 
-      cy.wrap($elOutOfAncestorOverflowAutoBoundsOutside).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfAncestorOverflowAutoBoundsOutside).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfAncestorOverflowAutoBoundsOutside).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfAncestorOverflowAutoBoundsOutside).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent is wide and ancestor inside shadow dom is overflow auto', () => {
-      const $elOutOfAncestorOverflowAutoBoundsInside = add(
+        it('is hidden when parent is wide and ancestor inside shadow dom is overflow auto', () => {
+          const $elOutOfAncestorOverflowAutoBoundsInside = add(
         `<div style='width: 100px; height: 100px; overflow: auto;'>
           <shadow-root id="el-out-of-ancestor-overflow-auto-bounds-inside"></shadow-root>
         </div>`,
@@ -413,27 +420,27 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <span style='position: absolute; left: 300px; top: 0px;'>out of bounds, parent wide, ancestor overflow: auto</span>
         </div>`,
         '#el-out-of-ancestor-overflow-auto-bounds-inside',
-      )
+          )
 
-      cy.wrap($elOutOfAncestorOverflowAutoBoundsInside).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfAncestorOverflowAutoBoundsInside).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfAncestorOverflowAutoBoundsInside).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfAncestorOverflowAutoBoundsInside).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent outside of shadow dom has overflow scroll and out of bounds', () => {
-      const $elOutOfScrollingParentBounds = add(
+        it('is hidden when parent outside of shadow dom has overflow scroll and out of bounds', () => {
+          const $elOutOfScrollingParentBounds = add(
         `<div style='width: 100px; height: 100px; overflow: scroll; position: relative; top: 700px; left: 700px;'>
           <shadow-root id="el-out-of-scrolling-parent-bounds"></shadow-root>
         </div>`,
         `<span style='position: absolute; left: 300px; top: 0;'>out of scrolling bounds, position: absolute</span>`,
         '#el-out-of-scrolling-parent-bounds',
-      )
+          )
 
-      cy.wrap($elOutOfScrollingParentBounds).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfScrollingParentBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfScrollingParentBounds).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfScrollingParentBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent absolutely positioned and overflow hidden and out of bounds', () => {
-      const $elOutOfPosAbsParentBounds = add(
+        it('is hidden when parent absolutely positioned and overflow hidden and out of bounds', () => {
+          const $elOutOfPosAbsParentBounds = add(
         `<div id="ancestor-el" style='width: 100px; height: 100px; overflow: hidden; position: relative; top: 700px; left: 700px;'>
           <div>
             <div id="parent-el" style='position: absolute;'>
@@ -443,14 +450,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span id="el-under-test" style='position: absolute; left: -350px; top: 0;'>out of bounds, position: absolute</span>`,
         '#el-out-of-pos-abs-parent-bounds',
-      )
+          )
 
-      cy.wrap($elOutOfPosAbsParentBounds).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfPosAbsParentBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfPosAbsParentBounds).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfPosAbsParentBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is visible when parent absolutely positioned and overflow hidden and not out of bounds', () => {
-      const $elInPosAbsParentsBounds = add(
+        it('is visible when parent absolutely positioned and overflow hidden and not out of bounds', () => {
+          const $elInPosAbsParentsBounds = add(
         `<div style='width: 200px; height: 200px; overflow: hidden; position: relative;'>
           <div style='position: absolute;'>
             <shadow-root id="el-in-pos-abs-parent-bounds"></shadow-root>
@@ -458,27 +465,27 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span style='position: absolute; left: 50px; top: 50px;'>in bounds, parent position: absolute</span>`,
         '#el-in-pos-abs-parent-bounds',
-      )
+          )
 
-      cy.wrap($elInPosAbsParentsBounds).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($elInPosAbsParentsBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($elInPosAbsParentsBounds).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($elInPosAbsParentsBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible when parent overflow hidden and not out of bounds', () => {
-      const $elInParentBounds = add(
+        it('is visible when parent overflow hidden and not out of bounds', () => {
+          const $elInParentBounds = add(
         `<div style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
           <shadow-root id="el-in-parent-bounds"></shadow-root>
         </div>`,
         `<span style='position: absolute; left: 0; top: 0;'>in bounds, position: absolute</span>`,
         '#el-in-parent-bounds',
-      )
+          )
 
-      cy.wrap($elInParentBounds).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($elInParentBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($elInParentBounds).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($elInParentBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible when ancestor outside shadow dom is overflow hidden but more distant ancestor is the offset parent', () => {
-      const $elIsOutOfBoundsOfOutsideAncestorsOverflowButWithinRelativeAncestor = add(
+        it('is visible when ancestor outside shadow dom is overflow hidden but more distant ancestor is the offset parent', () => {
+          const $elIsOutOfBoundsOfOutsideAncestorsOverflowButWithinRelativeAncestor = add(
         `<div style='padding: 100px; position: relative;'>
           <div style='overflow: hidden;'>
             <div>
@@ -488,14 +495,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span style='position: absolute; left: 0; top: 0;'>in bounds of ancestor, position: absolute, parent overflow: hidden</span>`,
         '#el-is-out-of-bounds-of-outside-ancestors-overflow-but-within-relative-ancestor',
-      )
+          )
 
-      cy.wrap($elIsOutOfBoundsOfOutsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($elIsOutOfBoundsOfOutsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($elIsOutOfBoundsOfOutsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($elIsOutOfBoundsOfOutsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible when ancestor inside shadow dom is overflow hidden but more distant ancestor is the offset parent', () => {
-      const $elIsOutOfBoundsOfInsideAncestorsOverflowButWithinRelativeAncestor = add(
+        it('is visible when ancestor inside shadow dom is overflow hidden but more distant ancestor is the offset parent', () => {
+          const $elIsOutOfBoundsOfInsideAncestorsOverflowButWithinRelativeAncestor = add(
         `<div style='padding: 100px; position: relative;'>
           <shadow-root id="el-is-out-of-bounds-of-inside-ancestors-overflow-but-within-relative-ancestor"></shadow-root>
         </div>`,
@@ -505,14 +512,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           </div>
         </div>`,
         '#el-is-out-of-bounds-of-inside-ancestors-overflow-but-within-relative-ancestor',
-      )
+          )
 
-      cy.wrap($elIsOutOfBoundsOfInsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($elIsOutOfBoundsOfInsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($elIsOutOfBoundsOfInsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($elIsOutOfBoundsOfInsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is hidden when relatively positioned outside of ancestor outside shadow dom with overflow hidden', () => {
-      const $elIsRelativeAndOutOfBoundsOfAncestorOverflow = add(
+        it('is hidden when relatively positioned outside of ancestor outside shadow dom with overflow hidden', () => {
+          const $elIsRelativeAndOutOfBoundsOfAncestorOverflow = add(
         `<div style='overflow: hidden;'>
           <div>
             <shadow-root id="el-is-relative-and-out-of-bounds-of-ancestor-overflow"></shadow-root>
@@ -520,27 +527,27 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span style='position: relative; left: 0; top: -200px;'>out of bounds, position: relative</span>`,
         '#el-is-relative-and-out-of-bounds-of-ancestor-overflow',
-      )
+          )
 
-      cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorOverflow).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorOverflow).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorOverflow).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorOverflow).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is visible when relatively positioned outside of ancestor outside shadow dom that does not hide overflow', () => {
-      const $elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow = add(
+        it('is visible when relatively positioned outside of ancestor outside shadow dom that does not hide overflow', () => {
+          const $elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow = add(
         `<div>
           <shadow-root id="el-is-relative-and-out-of-bounds-of-ancestor-but-ancestor-shows-overflow"></shadow-root>
         </div>`,
         `<span style='position: relative; left: 0; top: -200px;'>out of bounds but visible, position: relative</span>`,
         '#el-is-relative-and-out-of-bounds-of-ancestor-but-ancestor-shows-overflow',
-      )
+          )
 
-      cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible when parent inside shadow dom is relatively positioned out of bounds but el is relatively positioned back in bounds', () => {
-      const $insideParentOutOfBoundsButElInBounds = add(
+        it('is visible when parent inside shadow dom is relatively positioned out of bounds but el is relatively positioned back in bounds', () => {
+          const $insideParentOutOfBoundsButElInBounds = add(
         `<div style='position: relative; padding: 20px;'>
           <div style='overflow: hidden;'>
             <shadow-root id="inside-parent-out-of-bounds-but-el-in-bounds"></shadow-root>
@@ -550,14 +557,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <span style='position: relative; left: 0; top: 100px;'>in bounds of ancestor, parent out of bounds</span>
         </div>`,
         '#inside-parent-out-of-bounds-but-el-in-bounds',
-      )
+          )
 
-      cy.wrap($insideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($insideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($insideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($insideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible when parent outside shadow dom is relatively positioned out of bounds but el is relatively positioned back in bounds', () => {
-      const $outsideParentOutOfBoundsButElInBounds = add(
+        it('is visible when parent outside shadow dom is relatively positioned out of bounds but el is relatively positioned back in bounds', () => {
+          const $outsideParentOutOfBoundsButElInBounds = add(
         `<div style='position: relative; padding: 20px;'>
           <div style='overflow: hidden;'>
             <div style='position: relative; left: 0; top: -100px;'>
@@ -567,14 +574,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span style='position: relative; left: 0; top: 100px;'>in bounds of ancestor, parent out of bounds</span>`,
         '#outside-parent-out-of-bounds-but-el-in-bounds',
-      )
+          )
 
-      cy.wrap($outsideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($outsideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($outsideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($outsideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible when element is statically positioned and parent element is absolutely positioned and ancestor has overflow hidden', function () {
-      const el = add(
+        it('is visible when element is statically positioned and parent element is absolutely positioned and ancestor has overflow hidden', function () {
+          const el = add(
         `<div id="breaking-container" style="overflow: hidden">
           <div>
             <shadow-root id="shadow"></shadow-root>
@@ -584,14 +591,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <button id="visible-button">Try me</button>
         </div>`,
         '#shadow',
-      )
+          )
 
-      cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('be.visible')
-      cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('be.visible')
+          cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible when element is relatively positioned and parent element is absolutely positioned and ancestor has overflow auto', function () {
-      const el = add(
+        it('is visible when element is relatively positioned and parent element is absolutely positioned and ancestor has overflow auto', function () {
+          const el = add(
         `<div style="height: 200px; position: relative; display: flex">
           <div style="border: 5px solid red">
             <div
@@ -609,42 +616,42 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <button id="visible-button">Try me</button>
         </div>`,
         '#shadow',
-      )
+          )
 
-      cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('be.visible')
-      cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('not.be.hidden')
-    })
-  })
+          cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('be.visible')
+          cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('not.be.hidden')
+        })
+      })
 
-  describe('css transform', () => {
-    it('is hidden when outside parent outside of shadow dom transform scale', () => {
-      const $parentWithTransformScaleElOutsideScale = add(
+      describe('css transform', () => {
+        it('is hidden when outside parent outside of shadow dom transform scale', () => {
+          const $parentWithTransformScaleElOutsideScale = add(
         `<div style="transform: scale(0,0)">
           <shadow-root id="parent-with-transform-scale-el-outside-scale"></shadow-root>
         </div>`,
         `<span>TRANSFORMERS</span>`,
         '#parent-with-transform-scale-el-outside-scale',
-      )
+          )
 
-      cy.wrap($parentWithTransformScaleElOutsideScale).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($parentWithTransformScaleElOutsideScale).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($parentWithTransformScaleElOutsideScale).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($parentWithTransformScaleElOutsideScale).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is visible when inside parent outside of shadow dom transform scale', () => {
-      const $parentWithTransformScaleElInsideScale = add(
+        it('is visible when inside parent outside of shadow dom transform scale', () => {
+          const $parentWithTransformScaleElInsideScale = add(
         `<div style="transform: scale(1,1)">
           <shadow-root id="parent-with-transform-scale-el-inside-scale"></shadow-root>
         </div>`,
         `<span>TRANSFORMERS</span>`,
         '#parent-with-transform-scale-el-inside-scale',
-      )
+          )
 
-      cy.wrap($parentWithTransformScaleElInsideScale).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($parentWithTransformScaleElInsideScale).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($parentWithTransformScaleElInsideScale).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($parentWithTransformScaleElInsideScale).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is hidden when out of ancestor bounds due to ancestor within shadow dom transform', () => {
-      const $ancestorInsideTransformMakesElOutOfBoundsOfAncestor = add(
+        it('is hidden when out of ancestor bounds due to ancestor within shadow dom transform', () => {
+          const $ancestorInsideTransformMakesElOutOfBoundsOfAncestor = add(
         `<div style='margin-left: 100px; overflow: hidden; width: 100px;'>
           <shadow-root id="ancestor-inside-transform-makes-el-out-of-bounds-of-ancestor"></shadow-root>
         </div>`,
@@ -654,14 +661,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           </div>
         </div>`,
         '#ancestor-inside-transform-makes-el-out-of-bounds-of-ancestor',
-      )
+          )
 
-      cy.wrap($ancestorInsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($ancestorInsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($ancestorInsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($ancestorInsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when out of ancestor bounds due to ancestor outside shadow dom transform', () => {
-      const $ancestorOutsideTransformMakesElOutOfBoundsOfAncestor = add(
+        it('is hidden when out of ancestor bounds due to ancestor outside shadow dom transform', () => {
+          const $ancestorOutsideTransformMakesElOutOfBoundsOfAncestor = add(
         `<div style='margin-left: 100px; overflow: hidden; width: 100px;'>
           <div style='transform: translateX(-100px); width: 200px;'>
             <shadow-root id="ancestor-outside-transform-makes-el-out-of-bounds-of-ancestor"></shadow-root>
@@ -671,10 +678,12 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
             <span>out of ancestor's bounds due to ancestor translate</span>
         </div>`,
         '#ancestor-outside-transform-makes-el-out-of-bounds-of-ancestor',
-      )
+          )
 
-      cy.wrap($ancestorOutsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($ancestorOutsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('not.be.visible')
+          cy.wrap($ancestorOutsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($ancestorOutsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
+      })
     })
-  })
+  }
 })
diff --git a/packages/driver/cypress/e2e/e2e/visibility.cy.js b/packages/driver/cypress/e2e/e2e/visibility.cy.js
index a6475866afe..5ad46b764b2 100644
--- a/packages/driver/cypress/e2e/e2e/visibility.cy.js
+++ b/packages/driver/cypress/e2e/e2e/visibility.cy.js
@@ -1,58 +1,66 @@
 describe('visibility', () => {
-  // https://github.com/cypress-io/cypress/issues/631
-  describe('with overflow and transform - slider', () => {
-    beforeEach(() => {
-      cy.visit('/fixtures/issue-631.html')
-
-      // first slide is visible by default, nothing wrong here
-      cy.get('[name="test1"]').should('be.visible')
-      cy.get('[name="test2"]').should('not.be.visible')
-      cy.get('[name="test3"]').should('not.be.visible')
-    })
+  const modes = ['fast', 'legacy']
 
-    it('second slide', () => {
-      // ask for the second slide to become visible
-      cy.get('#button-2').click()
+  for (const mode of modes) {
+    describe(`${mode}`, {
+      experimentalFastVisibility: mode === 'fast',
+    }, () => {
+      // https://github.com/cypress-io/cypress/issues/631
+      describe('with overflow and transform - slider', () => {
+        beforeEach(() => {
+          cy.visit('/fixtures/issue-631.html')
 
-      cy.get('[name="test1"]').should('not.be.visible')
-      cy.get('[name="test2"]').should('be.visible')
-      cy.get('[name="test3"]').should('not.be.visible')
-    })
+          // first slide is visible by default, nothing wrong here
+          cy.get('[name="test1"]').should('be.visible')
+          cy.get('[name="test2"]').should('not.be.visible')
+          cy.get('[name="test3"]').should('not.be.visible')
+        })
 
-    it('third slide', () => {
-      // ask for the second slide to become visible
-      cy.get('#button-3').click()
+        it('second slide', () => {
+          // ask for the second slide to become visible
+          cy.get('#button-2').click()
 
-      cy.get('[name="test1"]').should('not.be.visible')
-      cy.get('[name="test2"]').should('not.be.visible')
-      cy.get('[name="test3"]').should('be.visible')
-    })
-  })
+          cy.get('[name="test1"]').should('not.be.visible')
+          cy.get('[name="test2"]').should('be.visible')
+          cy.get('[name="test3"]').should('not.be.visible')
+        })
 
-  describe('with shadow dom', () => {
-    // https://github.com/cypress-io/cypress/issues/7794
-    it('fixed position ancestor does not hang when checking visibility', () => {
-      cy.visit('/fixtures/issue-7794.html')
-      cy.get('.container-2').should('be.visible')
-    })
+        it('third slide', () => {
+          // ask for the second slide to become visible
+          cy.get('#button-3').click()
 
-    // TODO: move with tests added in this PR when it merges: https://github.com/cypress-io/cypress/pull/8166
-    it('non-visible ancestor causes element to not be visible', () => {
-      cy.visit('/fixtures/shadow-dom.html')
-      cy
-      .get('#shadow-element-10')
-      .find('.shadow-div', { includeShadowDom: true })
-      .should('not.be.visible')
-    })
-  })
-
-  describe('css opacity', () => {
-    it('correctly detects visibility when opacity changes', () => {
-      cy.visit('/fixtures/opacity.html')
-      cy.get('#opacity')
-      .should('be.visible')
-      .click()
-      .should('not.be.visible')
+          cy.get('[name="test1"]').should('not.be.visible')
+          cy.get('[name="test2"]').should('not.be.visible')
+          cy.get('[name="test3"]').should('be.visible')
+        })
+      })
+
+      describe('with shadow dom', () => {
+        // https://github.com/cypress-io/cypress/issues/7794
+        it('fixed position ancestor does not hang when checking visibility', () => {
+          cy.visit('/fixtures/issue-7794.html')
+          cy.get('.container-2').should('be.visible')
+        })
+
+        // TODO: move with tests added in this PR when it merges: https://github.com/cypress-io/cypress/pull/8166
+        it('non-visible ancestor causes element to not be visible', () => {
+          cy.visit('/fixtures/shadow-dom.html')
+          cy
+          .get('#shadow-element-10')
+          .find('.shadow-div', { includeShadowDom: true })
+          .should('not.be.visible')
+        })
+      })
+
+      describe('css opacity', () => {
+        it('correctly detects visibility when opacity changes', () => {
+          cy.visit('/fixtures/opacity.html')
+          cy.get('#opacity')
+          .should('be.visible')
+          .click()
+          .should('not.be.visible')
+        })
+      })
     })
-  })
+  }
 })
diff --git a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
new file mode 100644
index 00000000000..086390eea28
--- /dev/null
+++ b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
@@ -0,0 +1,395 @@
+/**
+ * Virtual Scrolling Browser Crash Tests
+ *
+ * This test suite is designed to reproduce browser crashes when scrolling
+ * with virtual scroll libraries, as reported by users.
+ *
+ * Test scenarios include:
+ * - Basic virtual list scrolling
+ * - Dynamic height virtual lists
+ * - Multiple virtual lists simultaneously
+ * - Extreme stress tests with large datasets
+ * - Rapid scrolling patterns that may cause crashes
+ */
+
+describe('Virtual Scrolling Stress Tests', {
+  experimentalFastVisibility: true, // if this is set to false, this spec will crash the browser
+  numTestsKeptInMemory: 1,
+}, () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/virtual-scroll-stress-test.html')
+
+    cy.get('.header').should('be.visible')
+
+    // Clear any existing data
+    cy.window().then((win) => {
+      if (win.clearBasicList) win.clearBasicList()
+
+      if (win.clearDynamicList) win.clearDynamicList()
+
+      if (win.clearMultipleLists) win.clearMultipleLists()
+
+      if (win.clearExtremeList) win.clearExtremeList()
+    })
+  })
+
+  describe('Basic Virtual List Tests', () => {
+    it('should load basic virtual list without crashing', () => {
+      cy.get('button').contains('Load Basic List').click()
+
+      cy.get('#basicList .item', { log: false })
+      .should('have.length.greaterThan', 0, { log: false })
+    })
+
+    it('should handle normal scrolling without crashing', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Perform normal scrolling
+      cy.get('#basicList').scrollTo(0, 1000)
+      cy.get('#basicList').scrollTo(0, 2000)
+      cy.get('#basicList').scrollTo(0, 5000)
+    })
+
+    it('should handle rapid scrolling without crashing', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Perform rapid scrolling
+      cy.get('#basicList').scrollTo(0, 100)
+      cy.get('#basicList').scrollTo(0, 300)
+      cy.get('#basicList').scrollTo(0, 600)
+      cy.get('#basicList').scrollTo(0, 1000)
+      cy.get('#basicList').scrollTo(0, 1500)
+      cy.get('#basicList').scrollTo(0, 2000)
+    })
+
+    it('should handle stress scrolling without crashing', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Trigger stress scrolling
+      cy.get('button').contains('Stress Scroll').click()
+
+      // Wait for stress scrolling to complete
+      cy.wait(2000)
+
+      // Verify the page is still responsive
+      cy.get('#basicScrolls').should('be.visible')
+      cy.get('#basicItems').should('contain', '10000')
+    })
+
+    it('should handle scrolling to bottom and back to top', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Scroll to bottom
+      cy.get('#basicList').scrollTo('bottom')
+      cy.wait(500)
+
+      // Scroll back to top
+      cy.get('#basicList').scrollTo('top')
+      cy.wait(500)
+
+      // Verify page is still responsive
+      cy.get('#basicScrolls').should('be.visible')
+    })
+  })
+
+  describe('Dynamic Height Virtual List Tests', () => {
+    it('should load dynamic height list without crashing', () => {
+      // Load the dynamic list
+      cy.get('button').contains('Load Dynamic List').click()
+
+      // Wait for items to load
+      cy.get('#dynamicItems').should('contain', '5000')
+      cy.get('.loading').should('not.exist')
+
+      // Verify the virtual list is rendered
+      cy.get('#dynamicList').should('be.visible')
+      cy.get('#dynamicList .item').should('have.length.greaterThan', 0)
+    })
+
+    it('should handle scrolling with dynamic heights without crashing', () => {
+      // Load the dynamic list
+      cy.get('button').contains('Load Dynamic List').click()
+      cy.get('#dynamicItems').should('contain', '5000')
+
+      // Perform scrolling with dynamic heights
+      cy.get('#dynamicList').scrollTo(0, 500)
+      cy.get('#dynamicList').scrollTo(0, 1000)
+      cy.get('#dynamicList').scrollTo(0, 2000)
+    })
+
+    it('should handle rapid scrolling with dynamic heights', () => {
+      // Load the dynamic list
+      cy.get('button').contains('Load Dynamic List').click()
+      cy.get('#dynamicItems').should('contain', '5000')
+
+      // Trigger rapid scrolling
+      cy.get('button').contains('Rapid Scroll').click()
+
+      // Wait for rapid scrolling to complete
+      cy.wait(1500)
+
+      // Verify the page is still responsive
+      cy.get('#dynamicScrolls').should('be.visible')
+      cy.get('#dynamicItems').should('contain', '5000')
+    })
+  })
+
+  describe('Multiple Virtual Lists Tests', () => {
+    it('should load multiple lists without crashing', () => {
+      // Load multiple lists
+      cy.get('button').contains('Load Multiple Lists').click()
+
+      // Wait for items to load
+      cy.get('#multipleItems').should('contain', '6000')
+      cy.get('.loading').should('not.exist')
+
+      // Verify both lists are rendered
+      cy.get('#multipleListA').should('be.visible')
+      cy.get('#multipleListB').should('be.visible')
+      cy.get('#multipleListA .item').should('have.length.greaterThan', 0)
+      cy.get('#multipleListB .item').should('have.length.greaterThan', 0)
+    })
+
+    it('should handle simultaneous scrolling of multiple lists', () => {
+      // Load multiple lists
+      cy.get('button').contains('Load Multiple Lists').click()
+      cy.get('#multipleItems').should('contain', '6000')
+
+      // Scroll both lists simultaneously
+      cy.get('#multipleListA').scrollTo(0, 1000)
+      cy.get('#multipleListB').scrollTo(0, 1500)
+    })
+
+    it('should handle stress scrolling multiple lists', () => {
+      // Load multiple lists
+      cy.get('button').contains('Load Multiple Lists').click()
+      cy.get('#multipleItems').should('contain', '6000')
+
+      // Trigger stress scrolling on multiple lists
+      cy.get('button').contains('Stress Test All').click()
+
+      // Wait for stress scrolling to complete
+      cy.wait(3000)
+
+      // Verify the page is still responsive
+      cy.get('#multipleScrolls').should('be.visible')
+      cy.get('#multipleItems').should('contain', '6000')
+    })
+
+    it('should handle alternating scroll between lists', () => {
+      // Load multiple lists
+      cy.get('button').contains('Load Multiple Lists').click()
+      cy.get('#multipleItems').should('contain', '6000')
+
+      // Alternate scrolling between lists
+      cy.get('#multipleListA').scrollTo(0, 500)
+      cy.get('#multipleListB').scrollTo(0, 500)
+      cy.get('#multipleListA').scrollTo(0, 1000)
+      cy.get('#multipleListB').scrollTo(0, 1000)
+      cy.get('#multipleListA').scrollTo(0, 1500)
+      cy.get('#multipleListB').scrollTo(0, 1500)
+    })
+  })
+
+  describe('Extreme Stress Tests', () => {
+    it('should load extreme list without crashing', () => {
+      // Load the extreme list
+      cy.get('button').contains('Load Extreme List').click()
+
+      // Wait for items to load (this may take longer)
+      cy.get('#extremeItems', { timeout: 10000 }).should('contain', '50000')
+      cy.get('.loading').should('not.exist')
+
+      // Verify the virtual list is rendered
+      cy.get('#extremeList').should('be.visible')
+      cy.get('#extremeList .item').should('have.length.greaterThan', 0)
+    })
+
+    it('should handle extreme scrolling without crashing', () => {
+      // Load the extreme list
+      cy.get('button').contains('Load Extreme List').click()
+      cy.get('#extremeItems', { timeout: 10000 }).should('contain', '50000')
+
+      // Perform extreme scrolling
+      cy.get('#extremeList').scrollTo(0, 5000)
+      cy.get('#extremeList').scrollTo(0, 10000)
+      cy.get('#extremeList').scrollTo(0, 20000)
+    })
+
+    it('should handle extreme stress scrolling test', () => {
+      // Load the extreme list
+      cy.get('button').contains('Load Extreme List').click()
+      cy.get('#extremeItems', { timeout: 10000 }).should('contain', '50000')
+
+      // Trigger extreme scroll test
+      cy.get('button').contains('Extreme Scroll Test').click()
+
+      // Wait for extreme scrolling to complete
+      cy.wait(5000)
+
+      // Verify the page is still responsive
+      cy.get('#extremeScrolls').should('be.visible')
+      cy.get('#extremeItems').should('contain', '50000')
+    })
+
+    it('should handle rapid scrolling with heavy operations', () => {
+      // Load the extreme list
+      cy.get('button').contains('Load Extreme List').click()
+      cy.get('#extremeItems', { timeout: 10000 }).should('contain', '50000')
+
+      // Click heavy operation buttons while scrolling
+      cy.get('#extremeList').scrollTo(0, 1000)
+      cy.get('#extremeList .item-btn').first().click()
+      cy.get('#extremeList').scrollTo(0, 2000)
+      cy.get('#extremeList .item-btn').eq(1).click()
+      cy.get('#extremeList').scrollTo(0, 3000)
+      cy.get('#extremeList .item-btn').eq(2).click()
+    })
+  })
+
+  describe('Memory and Performance Tests', () => {
+    it('should handle memory pressure from multiple large lists', () => {
+      // Load all lists simultaneously
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('button').contains('Load Dynamic List').click()
+      cy.get('button').contains('Load Multiple Lists').click()
+      cy.get('button').contains('Load Extreme List').click()
+
+      // Wait for all lists to load
+      cy.get('#basicItems').should('contain', '10000')
+      cy.get('#dynamicItems').should('contain', '5000')
+      cy.get('#multipleItems').should('contain', '6000')
+      cy.get('#extremeItems', { timeout: 15000 }).should('contain', '50000')
+
+      // Perform scrolling on all lists
+      cy.get('#basicList').scrollTo(0, 1000)
+      cy.get('#dynamicList').scrollTo(0, 1000)
+      cy.get('#multipleListA').scrollTo(0, 1000)
+      cy.get('#multipleListB').scrollTo(0, 1000)
+      cy.get('#extremeList').scrollTo(0, 1000)
+    })
+
+    it('should handle rapid scroll direction changes', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Rapid scroll direction changes
+      cy.get('#basicList').scrollTo(0, 1000)
+      cy.get('#basicList').scrollTo(0, 500)
+      cy.get('#basicList').scrollTo(0, 1500)
+      cy.get('#basicList').scrollTo(0, 800)
+      cy.get('#basicList').scrollTo(0, 2000)
+      cy.get('#basicList').scrollTo(0, 1200)
+    })
+
+    it('should handle scroll with rapid item interactions', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Scroll and interact with items rapidly
+      cy.get('#basicList').scrollTo(0, 1000)
+      cy.get('#basicList .item-btn').first().click()
+      cy.get('#basicList').scrollTo(0, 2000)
+      cy.get('#basicList .item-btn').eq(1).click()
+      cy.get('#basicList').scrollTo(0, 3000)
+      cy.get('#basicList .item-btn').eq(2).click()
+    })
+  })
+
+  describe('Browser Crash Detection Tests', () => {
+    it('should detect if browser becomes unresponsive', () => {
+      // Load the extreme list
+      cy.get('button').contains('Load Extreme List').click()
+      cy.get('#extremeItems', { timeout: 10000 }).should('contain', '50000')
+
+      // Perform operations that might cause crashes
+      cy.get('button').contains('Extreme Scroll Test').click()
+
+      // Wait and check if page is still responsive
+      cy.wait(2000)
+
+      // Try to interact with the page
+      cy.get('#extremeScrolls').should('be.visible')
+      cy.get('button').contains('Clear List').should('be.visible')
+
+      // Try to scroll the main page
+      cy.scrollTo(0, 500)
+      cy.scrollTo(0, 0)
+    })
+
+    it('should detect memory leaks during extended scrolling', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Perform extended scrolling
+      for (let i = 0; i < 10; i++) {
+        cy.get('#basicList').scrollTo(0, i * 1000)
+        cy.wait(100)
+      }
+
+      // Verify the page is still responsive
+      cy.get('#basicScrolls').should('be.visible')
+      cy.get('#basicItems').should('contain', '10000')
+    })
+
+    it('should handle scroll with rapid list clearing and reloading', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Scroll a bit
+      cy.get('#basicList').scrollTo(0, 1000)
+
+      // Clear and reload multiple times
+      cy.get('button').contains('Clear List').click()
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      cy.get('button').contains('Clear List').click()
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Verify the page is still responsive
+      cy.get('#basicScrolls').should('be.visible')
+    })
+  })
+
+  describe('Cross-Browser Compatibility Tests', () => {
+    it('should work with different scroll behaviors', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Test different scroll methods
+      cy.get('#basicList').scrollTo(0, 1000)
+      cy.get('#basicList').scrollTo('bottom')
+      cy.get('#basicList').scrollTo('top')
+      cy.get('#basicList').scrollTo(0, 5000)
+    })
+
+    it('should handle scroll with different viewport sizes', () => {
+      // Test with different viewport sizes
+      cy.viewport(1920, 1080)
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+      cy.get('#basicList').scrollTo(0, 1000)
+
+      cy.viewport(1366, 768)
+      cy.get('#basicList').scrollTo(0, 2000)
+
+      cy.viewport(1024, 768)
+      cy.get('#basicList').scrollTo(0, 3000)
+    })
+  })
+})
diff --git a/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html b/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html
new file mode 100644
index 00000000000..17e6c4a66e1
--- /dev/null
+++ b/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html
@@ -0,0 +1,655 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test Website - Browser Crash Reproduction</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+            background-color: #f5f5f5;
+        }
+        
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+            padding: 20px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        
+        .test-section {
+            margin-bottom: 30px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        
+        .section-header {
+            background: #007acc;
+            color: white;
+            padding: 15px 20px;
+            margin: 0;
+            font-size: 18px;
+            font-weight: 600;
+        }
+        
+        .section-content {
+            padding: 20px;
+        }
+        
+        .controls {
+            margin-bottom: 20px;
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+        
+        .btn {
+            padding: 8px 16px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: background-color 0.2s;
+        }
+        
+        .btn-primary {
+            background: #007acc;
+            color: white;
+        }
+        
+        .btn-primary:hover {
+            background: #005a9e;
+        }
+        
+        .btn-danger {
+            background: #dc3545;
+            color: white;
+        }
+        
+        .btn-danger:hover {
+            background: #c82333;
+        }
+        
+        .btn-success {
+            background: #28a745;
+            color: white;
+        }
+        
+        .btn-success:hover {
+            background: #218838;
+        }
+        
+        .status {
+            padding: 10px;
+            border-radius: 4px;
+            margin-bottom: 15px;
+            font-weight: 500;
+        }
+        
+        .status-info {
+            background: #d1ecf1;
+            color: #0c5460;
+            border: 1px solid #bee5eb;
+        }
+        
+        .status-warning {
+            background: #fff3cd;
+            color: #856404;
+            border: 1px solid #ffeaa7;
+        }
+        
+        .status-error {
+            background: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
+        }
+        
+        .virtual-container {
+            border: 2px solid #e0e0e0;
+            border-radius: 4px;
+            background: white;
+            overflow-y: auto;
+            position: relative;
+        }
+        
+        .item {
+            padding: 15px;
+            border-bottom: 1px solid #f0f0f0;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            min-height: 60px;
+        }
+        
+        .item:last-child {
+            border-bottom: none;
+        }
+        
+        .item-content {
+            flex: 1;
+        }
+        
+        .item-title {
+            font-weight: 600;
+            margin-bottom: 5px;
+        }
+        
+        .item-description {
+            color: #666;
+            font-size: 14px;
+        }
+        
+        .item-actions {
+            display: flex;
+            gap: 5px;
+        }
+        
+        .item-btn {
+            padding: 4px 8px;
+            border: 1px solid #ddd;
+            border-radius: 3px;
+            background: white;
+            cursor: pointer;
+            font-size: 12px;
+        }
+        
+        .item-btn:hover {
+            background: #f8f9fa;
+        }
+        
+        .loading {
+            text-align: center;
+            padding: 20px;
+            color: #666;
+        }
+        
+        .error {
+            text-align: center;
+            padding: 20px;
+            color: #dc3545;
+            background: #f8d7da;
+            border-radius: 4px;
+            margin: 10px 0;
+        }
+        
+        .metrics {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        
+        .metric {
+            background: #f8f9fa;
+            padding: 15px;
+            border-radius: 4px;
+            text-align: center;
+        }
+        
+        .metric-value {
+            font-size: 24px;
+            font-weight: bold;
+            color: #007acc;
+        }
+        
+        .metric-label {
+            font-size: 14px;
+            color: #666;
+            margin-top: 5px;
+        }
+        
+        .scroll-indicator {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            background: rgba(0,0,0,0.8);
+            color: white;
+            padding: 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            z-index: 1000;
+        }
+        
+        .fallback-message {
+            background: #fff3cd;
+            color: #856404;
+            border: 1px solid #ffeaa7;
+            padding: 15px;
+            border-radius: 4px;
+            margin-bottom: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="scroll-indicator" id="scrollIndicator">
+        Scroll: <span id="scrollPosition">0</span>px
+    </div>
+    
+    <div class="container">
+        <div class="header">
+            <h1>Browser Crash Test</h1>
+            <p>This website is designed to reproduce browser crashes when scrolling with virtual scrolling libraries</p>
+            <div class="status status-warning">
+                ⚠️ Warning: This test may cause browser crashes or performance issues. Use with caution!
+            </div>
+            <div class="fallback-message">
+                <strong>Fallback Mode:</strong> Using native scrolling simulation.
+                This still reproduces the same crash scenarios with high-performance scrolling.
+            </div>
+        </div>
+        
+        <!-- Test Section 1: Basic Virtual List -->
+        <div class="test-section">
+            <h2 class="section-header">Test 1: Basic Virtual List (10,000 items)</h2>
+            <div class="section-content">
+                <div class="controls">
+                    <button class="btn btn-primary" onclick="loadBasicList()">Load Basic List</button>
+                    <button class="btn btn-danger" onclick="clearBasicList()">Clear List</button>
+                    <button class="btn btn-success" onclick="stressScrollBasic()">Stress Scroll</button>
+                </div>
+                <div class="metrics">
+                    <div class="metric">
+                        <div class="metric-value" id="basicItems">0</div>
+                        <div class="metric-label">Items Rendered</div>
+                    </div>
+                    <div class="metric">
+                        <div class="metric-value" id="basicScrolls">0</div>
+                        <div class="metric-label">Scroll Events</div>
+                    </div>
+                </div>
+                <div id="basicList" class="virtual-container" style="height: 400px;"></div>
+            </div>
+        </div>
+        
+        <!-- Test Section 2: Dynamic Height Virtual List -->
+        <div class="test-section">
+            <h2 class="section-header">Test 2: Dynamic Height Virtual List (5,000 items)</h2>
+            <div class="section-content">
+                <div class="controls">
+                    <button class="btn btn-primary" onclick="loadDynamicList()">Load Dynamic List</button>
+                    <button class="btn btn-danger" onclick="clearDynamicList()">Clear List</button>
+                    <button class="btn btn-success" onclick="stressScrollDynamic()">Rapid Scroll</button>
+                </div>
+                <div class="metrics">
+                    <div class="metric">
+                        <div class="metric-value" id="dynamicItems">0</div>
+                        <div class="metric-label">Items Rendered</div>
+                    </div>
+                    <div class="metric">
+                        <div class="metric-value" id="dynamicScrolls">0</div>
+                        <div class="metric-label">Scroll Events</div>
+                    </div>
+                </div>
+                <div id="dynamicList" class="virtual-container" style="height: 400px;"></div>
+            </div>
+        </div>
+        
+        <!-- Test Section 3: Multiple Virtual Lists -->
+        <div class="test-section">
+            <h2 class="section-header">Test 3: Multiple Virtual Lists (Crash Test)</h2>
+            <div class="section-content">
+                <div class="controls">
+                    <button class="btn btn-primary" onclick="loadMultipleLists()">Load Multiple Lists</button>
+                    <button class="btn btn-danger" onclick="clearMultipleLists()">Clear All</button>
+                    <button class="btn btn-success" onclick="stressScrollMultiple()">Stress Test All</button>
+                </div>
+                <div class="metrics">
+                    <div class="metric">
+                        <div class="metric-value" id="multipleItems">0</div>
+                        <div class="metric-label">Total Items</div>
+                    </div>
+                    <div class="metric">
+                        <div class="metric-value" id="multipleScrolls">0</div>
+                        <div class="metric-label">Total Scrolls</div>
+                    </div>
+                </div>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+                    <div>
+                        <h4>List A (3,000 items)</h4>
+                        <div id="multipleListA" class="virtual-container" style="height: 300px;"></div>
+                    </div>
+                    <div>
+                        <h4>List B (3,000 items)</h4>
+                        <div id="multipleListB" class="virtual-container" style="height: 300px;"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Test Section 4: Extreme Stress Test -->
+        <div class="test-section">
+            <h2 class="section-header">Test 4: Extreme Stress Test (50,000 items)</h2>
+            <div class="section-content">
+                <div class="controls">
+                    <button class="btn btn-primary" onclick="loadExtremeList()">Load Extreme List</button>
+                    <button class="btn btn-danger" onclick="clearExtremeList()">Clear List</button>
+                    <button class="btn btn-success" onclick="extremeScrollTest()">Extreme Scroll Test</button>
+                </div>
+                <div class="status status-error">
+                    ⚠️ This test uses 50,000 items and aggressive scrolling. It may crash your browser!
+                </div>
+                <div class="metrics">
+                    <div class="metric">
+                        <div class="metric-value" id="extremeItems">0</div>
+                        <div class="metric-label">Items Rendered</div>
+                    </div>
+                    <div class="metric">
+                        <div class="metric-value" id="extremeScrolls">0</div>
+                        <div class="metric-label">Scroll Events</div>
+                    </div>
+                </div>
+                <div id="extremeList" class="virtual-container" style="height: 500px;"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Global state for tracking
+        let scrollCounters = {
+            basic: 0,
+            dynamic: 0,
+            multiple: 0,
+            extreme: 0
+        };
+
+        // Update scroll indicator
+        function updateScrollIndicator() {
+            const indicator = document.getElementById('scrollIndicator');
+            const position = window.pageYOffset;
+            document.getElementById('scrollPosition').textContent = position;
+        }
+
+        window.addEventListener('scroll', updateScrollIndicator);
+
+        // Create item element
+        function createItem(index, item, isDynamic = false) {
+            const itemDiv = document.createElement('div');
+            itemDiv.className = 'item';
+            
+            if (isDynamic) {
+                const height = 50 + (index % 5) * 20;
+                itemDiv.style.height = `${height}px`;
+            }
+            
+            itemDiv.innerHTML = `
+                <div class="item-content">
+                    <div class="item-title">${isDynamic ? 'Dynamic' : 'Item'} #${index + 1}</div>
+                    <div class="item-description">${item.description}</div>
+                    ${isDynamic ? `<div style="font-size: 12px; color: #999;">Height: ${50 + (index % 5) * 20}px | Index: ${index}</div>` : ''}
+                </div>
+                <div class="item-actions">
+                    <button class="item-btn" onclick="console.log('Click', ${index})">Click</button>
+                    <button class="item-btn" onclick="console.log('Edit', ${index})">Edit</button>
+                </div>
+            `;
+            
+            return itemDiv;
+        }
+
+        // Create extreme item element
+        function createExtremeItem(index, item) {
+            const itemDiv = document.createElement('div');
+            itemDiv.className = 'item';
+            itemDiv.style.padding = '10px';
+            
+            itemDiv.innerHTML = `
+                <div class="item-content">
+                    <div class="item-title">Extreme Item #${index + 1}</div>
+                    <div class="item-description">${item.description}</div>
+                    <div style="font-size: 12px; color: #999;">Complex data: ${item.complexData}</div>
+                </div>
+                <div class="item-actions">
+                    <button class="item-btn" onclick="for(let i = 0; i < 1000; i++) Math.random();">Heavy</button>
+                </div>
+            `;
+            
+            return itemDiv;
+        }
+
+        // Basic List Functions
+        function loadBasicList() {
+            const container = document.getElementById('basicList');
+            container.innerHTML = '<div class="loading">Loading items...</div>';
+            
+            setTimeout(() => {
+                container.innerHTML = '';
+                const items = Array.from({ length: 10000 }, (_, i) => ({
+                    id: i,
+                    description: `This is item number ${i + 1} with some additional content to make it more realistic. Lorem ipsum dolor sit amet, consectetur adipiscing elit.`
+                }));
+                
+                items.forEach((item, index) => {
+                    container.appendChild(createItem(index, item));
+                });
+                
+                document.getElementById('basicItems').textContent = items.length;
+                
+                // Add scroll listener
+                container.addEventListener('scroll', () => {
+                    console.log('scroll')
+                    scrollCounters.basic++;
+                    document.getElementById('basicScrolls').textContent = scrollCounters.basic;
+                });
+            }, 100);
+        }
+
+        function clearBasicList() {
+            const container = document.getElementById('basicList');
+            container.innerHTML = '';
+            document.getElementById('basicItems').textContent = '0';
+            document.getElementById('basicScrolls').textContent = '0';
+            scrollCounters.basic = 0;
+        }
+
+        function stressScrollBasic() {
+            const container = document.getElementById('basicList');
+            if (container.children.length > 0) {
+                let scrollPosition = 0;
+                const interval = setInterval(() => {
+                    scrollPosition += 100;
+                    container.scrollTop = scrollPosition;
+                    if (scrollPosition > 10000) {
+                        clearInterval(interval);
+                    }
+                }, 10);
+            }
+        }
+
+        // Dynamic List Functions
+        function loadDynamicList() {
+            const container = document.getElementById('dynamicList');
+            container.innerHTML = '<div class="loading">Loading dynamic items...</div>';
+            
+            setTimeout(() => {
+                container.innerHTML = '';
+                const items = Array.from({ length: 5000 }, (_, i) => ({
+                    id: i,
+                    description: `Dynamic item ${i + 1} with variable height content. This item has different heights to test dynamic sizing.`
+                }));
+                
+                items.forEach((item, index) => {
+                    container.appendChild(createItem(index, item, true));
+                });
+                
+                document.getElementById('dynamicItems').textContent = items.length;
+                
+                // Add scroll listener
+                container.addEventListener('scroll', () => {
+                    scrollCounters.dynamic++;
+                    document.getElementById('dynamicScrolls').textContent = scrollCounters.dynamic;
+                });
+            }, 100);
+        }
+
+        function clearDynamicList() {
+            const container = document.getElementById('dynamicList');
+            container.innerHTML = '';
+            document.getElementById('dynamicItems').textContent = '0';
+            document.getElementById('dynamicScrolls').textContent = '0';
+            scrollCounters.dynamic = 0;
+        }
+
+        function stressScrollDynamic() {
+            const container = document.getElementById('dynamicList');
+            if (container.children.length > 0) {
+                let scrollPosition = 0;
+                const interval = setInterval(() => {
+                    scrollPosition += 50;
+                    container.scrollTop = scrollPosition;
+                    if (scrollPosition > 5000) {
+                        clearInterval(interval);
+                    }
+                }, 5);
+            }
+        }
+
+        // Multiple Lists Functions
+        function loadMultipleLists() {
+            const containerA = document.getElementById('multipleListA');
+            const containerB = document.getElementById('multipleListB');
+            
+            containerA.innerHTML = '<div class="loading">Loading List A...</div>';
+            containerB.innerHTML = '<div class="loading">Loading List B...</div>';
+            
+            setTimeout(() => {
+                containerA.innerHTML = '';
+                containerB.innerHTML = '';
+                
+                const itemsA = Array.from({ length: 3000 }, (_, i) => ({
+                    id: i,
+                    description: `List A Item ${i + 1}`
+                }));
+                
+                const itemsB = Array.from({ length: 3000 }, (_, i) => ({
+                    id: i,
+                    description: `List B Item ${i + 1}`
+                }));
+                
+                itemsA.forEach((item, index) => {
+                    containerA.appendChild(createItem(index, item));
+                });
+                
+                itemsB.forEach((item, index) => {
+                    containerB.appendChild(createItem(index, item));
+                });
+                
+                document.getElementById('multipleItems').textContent = itemsA.length + itemsB.length;
+                
+                // Add scroll listeners
+                containerA.addEventListener('scroll', () => {
+                    scrollCounters.multiple++;
+                    document.getElementById('multipleScrolls').textContent = scrollCounters.multiple;
+                });
+                
+                containerB.addEventListener('scroll', () => {
+                    scrollCounters.multiple++;
+                    document.getElementById('multipleScrolls').textContent = scrollCounters.multiple;
+                });
+            }, 100);
+        }
+
+        function clearMultipleLists() {
+            const containerA = document.getElementById('multipleListA');
+            const containerB = document.getElementById('multipleListB');
+            
+            containerA.innerHTML = '';
+            containerB.innerHTML = '';
+            
+            document.getElementById('multipleItems').textContent = '0';
+            document.getElementById('multipleScrolls').textContent = '0';
+            scrollCounters.multiple = 0;
+        }
+
+        function stressScrollMultiple() {
+            const containerA = document.getElementById('multipleListA');
+            const containerB = document.getElementById('multipleListB');
+            
+            if (containerA.children.length > 0 && containerB.children.length > 0) {
+                let scrollPositionA = 0;
+                let scrollPositionB = 0;
+                
+                const interval = setInterval(() => {
+                    scrollPositionA += 100;
+                    scrollPositionB += 150;
+                    
+                    containerA.scrollTop = scrollPositionA;
+                    containerB.scrollTop = scrollPositionB;
+                    
+                    if (scrollPositionA > 5000 && scrollPositionB > 5000) {
+                        clearInterval(interval);
+                    }
+                }, 10);
+            }
+        }
+
+        // Extreme List Functions
+        function loadExtremeList() {
+            const container = document.getElementById('extremeList');
+            container.innerHTML = '<div class="loading">Loading extreme test items...</div>';
+            
+            setTimeout(() => {
+                container.innerHTML = '';
+                const items = Array.from({ length: 50000 }, (_, i) => ({
+                    id: i,
+                    description: `Extreme test item ${i + 1} with complex data and heavy operations`,
+                    complexData: `Complex-${i}-${Math.random().toString(36).substr(2, 9)}`
+                }));
+                
+                items.forEach((item, index) => {
+                    container.appendChild(createExtremeItem(index, item));
+                });
+                
+                document.getElementById('extremeItems').textContent = items.length;
+                
+                // Add scroll listener
+                container.addEventListener('scroll', () => {
+                    scrollCounters.extreme++;
+                    document.getElementById('extremeScrolls').textContent = scrollCounters.extreme;
+                });
+            }, 100);
+        }
+
+        function clearExtremeList() {
+            const container = document.getElementById('extremeList');
+            container.innerHTML = '';
+            document.getElementById('extremeItems').textContent = '0';
+            document.getElementById('extremeScrolls').textContent = '0';
+            scrollCounters.extreme = 0;
+        }
+
+        function extremeScrollTest() {
+            const container = document.getElementById('extremeList');
+            if (container.children.length > 0) {
+                let scrollPosition = 0;
+                const interval = setInterval(() => {
+                    scrollPosition += 200;
+                    container.scrollTop = scrollPosition;
+                    if (scrollPosition > 100000) {
+                        clearInterval(interval);
+                    }
+                }, 1); // Very fast scrolling
+            }
+        }
+
+        // Initialize
+        console.log('Test Website loaded in fallback mode');
+        console.log('All functions are available:', {
+            loadBasicList: typeof loadBasicList,
+            loadDynamicList: typeof loadDynamicList,
+            loadMultipleLists: typeof loadMultipleLists,
+            loadExtremeList: typeof loadExtremeList
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/packages/driver/cypress/fixtures/visibility/basic-css-properties.html b/packages/driver/cypress/fixtures/visibility/basic-css-properties.html
new file mode 100644
index 00000000000..2d8c7d80299
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/basic-css-properties.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Basic CSS Properties Visibility Tests</title>
+  <link rel="stylesheet" href="./style.css">
+  <script src="./ux.js"></script>
+</head>
+<body>
+  <h1>Basic CSS Properties Visibility Tests</h1>
+  
+  <div class="test-section" cy-section="visibility-property">
+    <h3>Visibility Property</h3>
+    <div class="testCase" cy-expect="hidden" cy-label="Hidden by visibility" style="visibility: hidden;">Hidden by visibility</div>
+    <div class="testCase" cy-expect="visible" cy-label="Visible by visibility" style="visibility: visible;">Visible by visibility</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Parent hidden by visibility" style="visibility: hidden;">
+      <button class="testCase" cy-expect="hidden" cy-label="Child of hidden parent">Child of hidden parent</button>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="display-property">
+    <h3>Display Property</h3>
+    <div class="testCase" cy-expect="hidden" cy-label="Hidden by display: none" style="display: none;">Hidden by display: none</div>
+    <div class="testCase" cy-expect="visible" cy-label="Visible by display: block" style="display: block;">Visible by display: block</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Parent hidden by display: none" style="display: none;">
+      <span class="testCase" cy-expect="hidden" cy-label="Child of display: none parent">Child of display: none parent</span>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="opacity-property">
+    <h3>Opacity Property</h3>
+    <div class="testCase" cy-expect="hidden" cy-label="Hidden by opacity: 0" style="opacity: 0;">Hidden by opacity: 0</div>
+    <div class="testCase" cy-expect="visible" cy-label="Semi-transparent (opacity: 0.5)" style="opacity: 0.5;">Semi-transparent (opacity: 0.5)</div>
+    <div class="testCase" cy-expect="visible" cy-label="Fully opaque (opacity: 1)" style="opacity: 1;">Fully opaque (opacity: 1)</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Parent hidden by opacity: 0" style="opacity: 0;">
+      <button class="testCase" cy-expect="hidden" cy-label="Child of opacity: 0 parent">Child of opacity: 0 parent</button>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="style-filters">
+    <h3>Style Filters</h3>
+    <!-- while opacity(0) renders the element as fully transparent, it is still considered visible: it has a box model, and it is clickable -->
+    <div class="testCase" cy-expect="visible" cy-label="Hidden by style filter: opacity(0)" style="filter: opacity(0);">Hidden by style filter: opacity(0)</div>
+  </div>
+
+  <div class="test-section" cy-section="table-elements">
+    <h3>Table Elements</h3>
+    <table>
+      <tr>
+        <td class="testCase" cy-expect="visible" cy-label="Normal Cell">Normal Cell</td>
+        <td class="testCase" cy-expect="visible" cy-label="Normal Cell">Normal Cell</td>
+        <td class="testCase" cy-expect="hidden" cy-label="Cell by visibility: collapse" style="visibility: collapse;">Cell by visibility: collapse</td>
+      </tr>
+
+      <tr class="testCase" cy-expect="hidden" cy-label="Row hidden by visibility: collapse" style="visibility: collapse;">
+        <td class="testCase" cy-expect="hidden" cy-label="Cell hidden by row's visibility: collapse">Cell hidden by row's visibility: collapse</td>
+      </tr>
+    </table>
+  </div>
+  <div class="test-section" cy-section="box-interactions">
+    <div>
+      <span class="testCase" cy-expect="visible" cy-label="Span container for block element">
+        <label class="testCase" cy-expect="visible" cy-label="Block element inside an inline element" style="display: block">Block element inside an inline element</label>
+      </span>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="pointer-events-none">
+    <h3>Pointer Events: None</h3>
+    <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Element with pointer-events: none" style="pointer-events: none;">Element with pointer-events: none</div>
+  </div>
+
+  <div class="test-section" cy-section="contain-property">
+    <h3>CSS Contain Property</h3>
+    
+    <!-- Element with contain: layout -->
+    <div class="testCase" cy-expect="visible" cy-label="Element with contain: layout" style="width: 100px; height: 100px; background: lightcoral; contain: layout;">
+      <span class="testCase" cy-expect="visible" cy-label="Child of contain: layout element">contain: layout</span>
+    </div>
+
+    <!-- Element with contain: paint -->
+    <div class="testCase" cy-expect="visible" cy-label="Element with contain: paint" style="width: 100px; height: 100px; background: lightcoral; contain: paint;">
+      <span class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Child positioned out of bounds of its `contain: paint` parent" style="position:relative; top:500px">contain: paint</span>
+    </div>
+
+    <!-- Element with contain: strict -->
+    <div class="testCase" cy-expect="visible" cy-label="Element with contain: strict" style="width: 100px; height: 100px; background: lightcoral; contain: strict;">
+      <span class="testCase" cy-expect="visible" cy-label="Child of contain: strict element">contain: strict</span>
+    </div>
+  </div>
+
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/visibility/empty.html b/packages/driver/cypress/fixtures/visibility/empty.html
new file mode 100644
index 00000000000..f799f0cb387
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/empty.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<body>
+  <div />
+</body>
\ No newline at end of file
diff --git a/packages/driver/cypress/fixtures/visibility/form-elements.html b/packages/driver/cypress/fixtures/visibility/form-elements.html
new file mode 100644
index 00000000000..42928c9f2b4
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/form-elements.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Form Elements Visibility Tests</title>
+  <link rel="stylesheet" href="./style.css">
+  <script src="./ux.js"></script>
+</head>
+<body>
+  <h1>Form Elements Visibility Tests</h1>
+  
+  <div class="test-section" cy-section="select-and-option-elements" cy-has-conflicts="true">
+    <h3>Select and Option Elements</h3>
+    <select class="testCase" cy-expect="visible">
+      <option class="testCase" cy-expect="visible" cy-label="Visible Select > Opt 1">Visible Option</option>
+      <option class="testCase" cy-expect="visible" cy-label="Visible Select > Opt 2">Another Visible Option</option>
+    </select>
+    
+    <select class="testCase" cy-expect="hidden" style="display: none;">
+      <option class="testCase" cy-expect="hidden" id="hidden-option" cy-label="Hidden Select > Opt 1">Hidden Option</option>
+    </select>
+  </div>
+
+  <div class="test-section" cy-section="optgroup-elements" cy-has-conflicts="true">
+    <h3>Optgroup Elements</h3>
+    <select class="testCase" cy-expect="visible" cy-label="select with optgroup">
+      <optgroup class="testCase" cy-expect="visible" cy-label="Visible opt Group">
+        <option class="testCase" cy-expect="visible" cy-label="Visible opt Group > Opt 1">Option 1</option>
+        <option class="testCase" cy-expect="visible" cy-label="Visible opt Group > Opt 2">Option 2</option>
+      </optgroup>
+    </select>
+    
+    <select class="testCase" cy-expect="hidden" style="display: none;">
+      <optgroup class="testCase" cy-expect="hidden" label="Hidden Group">
+        <option class="testCase" cy-expect="hidden" cy-label="Hidden opt Group > Opt 1">Hidden Option 1</option>
+        <option class="testCase" cy-expect="hidden" cy-label="Hidden opt Group > Opt 2">Hidden Option 2</option>
+      </optgroup>
+    </select>
+  </div>
+
+  <div class="test-section" cy-section="options-outside-select">
+    <h3>Options Outside Select</h3>
+    <div class="testCase" cy-expect="hidden" style="display: none;">
+      <option class="testCase" cy-expect="hidden" id="detached-option" cy-label="Detached Option">Detached Option</option>
+    </div>
+    <div class="testCase" cy-expect="visible">
+      <option class="testCase" cy-expect="visible" id="standalone-option" cy-label="Standalone Option">Standalone Option</option>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="hidden-options-within-visible-select">
+    <h3>Hidden Options Within Visible Select</h3>
+    <select class="testCase" cy-expect="visible" id="select-with-hidden-option">
+      <option class="testCase" cy-expect="visible" id="visible-option-in-select" cy-label="Visible Select > Visible Option">Visible Option</option>
+      <option class="testCase" cy-expect="hidden" style="display: none;" cy-label="Visible Select > Hidden Option">Hidden Option</option>
+    </select>
+  </div>
+
+  <div class="test-section" cy-section="input-elements">
+    <h3>Input Elements</h3>
+    <input class="testCase" cy-expect="hidden" type="hidden" value="hidden input">
+    <input class="testCase" cy-expect="visible" type="text" value="visible input">
+    <input class="testCase" cy-expect="hidden" type="text" value="display none input" style="display: none;">
+  </div>
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/visibility/overflow.html b/packages/driver/cypress/fixtures/visibility/overflow.html
new file mode 100644
index 00000000000..100e127ecd4
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/overflow.html
@@ -0,0 +1,289 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Overflow Visibility Tests</title>
+  <link rel="stylesheet" href="./style.css">
+  <script src="./ux.js"></script>
+</head>
+<body cy-has-conflicts="true">
+  <h1>Overflow Visibility Tests</h1>
+
+  <div class="test-section" cy-section="zero-dimensions-with-overflow-hidden">
+    <h3>Zero Dimensions with Overflow Hidden</h3>
+    
+    <!-- Zero width ancestor, parent, self -->
+    <div class="testCase" cy-expect="hidden" cy-label="Zero width ancestor, parent, self" style="width: 0; height: 100px; overflow: hidden; background: lightcoral;">
+      <div class="testCase" cy-expect="hidden" cy-label="Zero width parent" style="width: 0; height: 100px; overflow: hidden; background: lightcoral;">
+        <span class="testCase" cy-expect="hidden" cy-label="Zero width self">Zero width ancestor, parent, self</span>
+      </div>
+    </div>
+
+    <!-- Zero height ancestor, parent, self -->
+    <div class="testCase" cy-expect="hidden" cy-label="Zero height ancestor, parent, self" style="width: 100px; height: 0; overflow: hidden; background: lightcoral;">
+      <div class="testCase" cy-expect="hidden" cy-label="Zero height parent" style="width: 100px; height: 0; overflow: hidden; background: lightcoral;">
+        <span class="testCase" cy-expect="hidden" cy-label="Zero height self">Zero height ancestor, parent, self</span>
+      </div>
+    </div>
+
+    <!-- Zero width ancestor, positive parent, self -->
+    <div class="testCase" cy-expect="hidden" cy-label="Zero width ancestor with positive parent" style="width: 0; height: 100px; overflow: hidden; background: lightcoral;">
+      <div class="testCase" cy-expect="hidden" cy-label="Positive parent under zero width ancestor" style="width: 100px; height: 100px; overflow: hidden; background: lightcoral;">
+        <span class="testCase" cy-expect="hidden" cy-label="Self under zero width ancestor">Zero width ancestor, positive parent</span>
+      </div>
+    </div>
+
+    <!-- Zero height ancestor, positive parent, self -->
+    <div class="testCase" cy-expect="hidden" cy-label="Zero height ancestor with positive parent" style="width: 100px; height: 0; overflow: hidden; background: lightcoral;">
+      <div class="testCase" cy-expect="hidden" cy-label="Positive parent under zero height ancestor" style="width: 100px; height: 100px; overflow: hidden; background: lightcoral;">
+        <span class="testCase" cy-expect="hidden" cy-label="Self under zero height ancestor">Zero height ancestor, positive parent</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="text-content-with-zero-dimensions">
+    <h3>Text Content with Zero Dimensions</h3>
+    
+    <!-- Self with text content, zero width -->
+    <div class="testCase" cy-expect="visible" cy-label="Self with text content and zero width" style="width: 0; height: 100px; background: lightgreen;">
+      lorem ipsum dolor sit amet
+    </div>
+
+    <!-- Self with text content, zero height -->
+    <div class="testCase" cy-expect="visible" cy-label="Self with text content and zero height" style="width: 50px; height: 0px; background: lightgreen;">
+      lorem ipsum dolor sit amet
+    </div>
+
+    <!-- Self with whitespace only, zero width -->
+    <div class="testCase" cy-expect="hidden" cy-label="Self with only whitespace content and zero width" style="width: 0px; height: 50px; background: lightcoral;">
+      
+    </div>
+
+    <!-- Ancestor with text content, zero width -->
+    <div class="testCase" cy-expect="visible" cy-label="Ancestor with text content and zero width" style="width: 0; height: 100px; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Parent under zero width ancestor with text">
+        <span class="testCase" cy-expect="visible" cy-label="Self under zero width ancestor with text">ancestor width: 0</span>
+      </div>
+    </div>
+
+    <!-- Ancestor with text content, zero height -->
+    <div class="testCase" cy-expect="visible" cy-label="Ancestor with text content and zero height" style="width: 100px; height: 0px; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Parent under zero height ancestor with text">
+        <span class="testCase" cy-expect="visible" cy-label="Self under zero height ancestor with text">ancestor height: 0</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="positive-dimensions-with-overflow-hidden">
+    <h3>Positive Dimensions with Overflow Hidden</h3>
+    
+    <!-- Positive ancestor, parent, self -->
+    <div class="testCase" cy-expect="visible" cy-label="Positive ancestor with overflow hidden parent" style="width: 100px; height: 100px; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Positive parent with overflow hidden" style="width: 100px; height: 100px; overflow: hidden; background: lightgreen;">
+        <span class="testCase" cy-expect="visible" cy-label="Self under positive dimensions with overflow hidden">ancestor with size, parent with size &amp; overflow: hidden</span>
+      </div>
+    </div>
+
+    <!-- Positive ancestor, zero parent, self -->
+    <div class="testCase" cy-expect="visible" cy-label="Positive ancestor with zero width parent" style="width: 100px; height: 100px; background: lightgreen;">
+      <div class="testCase" cy-expect="hidden" cy-label="Zero width parent under positive ancestor" style="width: 0; height: 100px; overflow: hidden; background: lightcoral;">
+        <span class="testCase" cy-expect="hidden" cy-label="Self under zero width parent">positive ancestor, zero parent</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="overflow-auto-with-zero-dimensions">
+    <h3>Overflow Auto with Zero Dimensions</h3>
+    
+    <!-- Zero dimensions with overflow auto -->
+    <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Zero dimensions with overflow auto" style="width: 0; height: 0px; overflow: auto; background: lightgreen;">
+      <span class="testCase" cy-expect="hidden" cy-label="Self under zero dimensions with overflow auto">parent no size, overflow: auto</span>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="mixed-dimension-scenarios">
+    <h3>Mixed Dimension Scenarios</h3>
+    
+    <!-- Zero width, positive height -->
+    <div class="testCase" cy-expect="visible" cy-label="Zero width with text content" style="width: 0; height: 100px; background: lightgreen;">Zero width</div>
+    <div class="testCase" cy-expect="visible" cy-label="Zero width with text content (blue)" style="width: 0; height: 100px; background: lightgreen;">Has text content</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Zero width with whitespace only" style="width: 0; height: 50px; background: lightcoral;">      </div>
+
+    <!-- Positive width, zero height -->
+    <div class="testCase" cy-expect="hidden" cy-label="Zero height without text content" style="width: 100px; height: 0; background: lightcoral;"></div>
+    <div class="testCase" cy-expect="visible" cy-label="Zero height with text content" style="width: 100px; height: 0; background: lightgreen;">Has text content</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Zero height with whitespace only" style="width: 50px; height: 0; background: lightcoral;">        </div>
+
+    <!-- Zero dimensions -->
+    <div style="width: 10; height: 10; background: lightyellow">
+      <div class="testCase" cy-expect="hidden" cy-label="Zero dimensions without content" style="width:0; height:0"></div>
+    </div>
+  </div>
+  <div class="test-section" cy-section="overflow-hidden">
+    <h3>Overflow Hidden scenarios</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Overflow hidden with positive dimensions" style="width: 100px; height: 100px; overflow: hidden; background: lightgreen; position:relative;">
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds left" style="width:100px; height:100px; background: lightcoral; position:absolute; left: 100px"></div>
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds right" style="width:100px; height:100px; background: lightcoral; position:absolute; right: 100px"></div>
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds top" style="width:100px; height:100px; background: lightcoral; position:absolute; top: 100px"></div>
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds bottom" style="width:100px; height:100px; background: lightcoral; position:absolute; bottom: 100px"></div>
+      <div class="testCase" cy-expect="visible" cy-label="Element in bounds" style="width:50px; height:50px; background: lightgreen; position:absolute; left: 50px; top: 50px;"></div>
+    </div>
+  </div>
+  <div class="test-section" cy-section="overflow-y-hidden">
+    <h3>Overflow Y Hidden scenarios</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Overflow y hidden with positive dimensions" style="width: 100px; height: 100px; overflow-y: hidden; background: lightgreen; position:relative;">
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds top" style="width:100px; height:100px; background: lightcoral; position:absolute; top: 100px"></div>
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds bottom" style="width:100px; height:100px; background: lightcoral; position:absolute; bottom: 100px"></div>
+      <div class="testCase" cy-expect="visible" cy-label="Element in bounds" style="width:50px; height:50px; background: lightgreen; position:absolute; left: 50px; top: 50px;"></div>
+    </div>
+  </div>
+  <div class="test-section" cy-section="overflow-x-hidden">
+    <h3>Overflow X Hidden scenarios</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Overflow x hidden with positive dimensions" style="width: 100px; height: 100px; overflow-x: hidden; background: lightgreen; position:relative;">
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds left" style="width:100px; height:100px; background: lightcoral; position:absolute; left: 100px"></div>
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds right" style="width:100px; height:100px; background: lightcoral; position:absolute; right: 100px"></div>
+      <div class="testCase" cy-expect="visible" cy-label="Element in bounds" style="width:50px; height:50px; background: lightgreen; position:absolute; left: 50px; top: 50px;"></div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="overflow-auto-scenarios">
+    <h3>Overflow Auto Scenarios</h3>
+    
+    <!-- Overflow auto with wide parent -->
+    <div class="testCase" cy-expect="visible" cy-label="Overflow auto container with wide parent" style="width: 100px; height: 100px; overflow: auto; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Wide parent container" style="width: 1000px; height: 100px; position: relative;">
+        <span class="testCase" cy-expect="hidden" cy-label="Element out of bounds with ancestor overflow auto" style="position: absolute; left: 300px; top: 0px;">out of bounds, parent wide, ancestor overflow: auto</span>
+      </div>
+    </div>
+
+    <!-- Overflow auto with zero dimensions -->
+    <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Zero dimensions with overflow auto" style="width: 0; height: 0px; overflow: auto; background: lightgreen;">
+      <span class="testCase" cy-expect="hidden" cy-label="Child under zero dimensions with overflow auto">parent no size, overflow: auto</span>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="overflow-scroll-scenarios">
+    <h3>Overflow Scroll Scenarios</h3>
+    
+    <!-- Overflow scroll out of bounds -->
+    <div class="testCase" cy-expect="visible" cy-label="Overflow scroll container" style="width: 100px; height: 100px; overflow: scroll; position: relative; background: lightgreen;">
+      <div class="testCase" cy-expect="hidden" cy-label="Parent container in scroll scenario">
+        <div class="testCase" cy-expect="hidden" cy-label="Child container in scroll scenario">
+          <span class="testCase" cy-expect="hidden" cy-label="Element out of scrolling bounds" style="position: absolute; left: 300px; top: 0px;">out of scrolling bounds, position: absolute</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="overflow-relative-positioning">
+    <h3>Overflow with Relative Positioning</h3>
+    
+    <!-- Overflow hidden with relative positioning -->
+    <div class="testCase" cy-expect="visible" cy-label="Overflow hidden container" style="overflow: hidden; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Parent container">
+        <span class="testCase" cy-expect="hidden" cy-label="Relatively positioned element out of bounds" style="position: relative; left: 0; top: -200px;">out of bounds, position: relative</span>
+      </div>
+    </div>
+
+    <!-- Overflow visible with relative positioning -->
+    <div class="testCase" cy-expect="visible" cy-label="Overflow visible container" style="background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Parent container">
+        <span class="testCase" cy-expect="visible" cy-label="Relatively positioned element out of bounds but visible" style="position: relative; left: 0; top: 100px;">out of bounds but visible, position: relative</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="overflow-flex-container">
+    <h3>Overflow with Flex Container</h3>
+    
+    <!-- Flex container with overflow hidden -->
+    <div class="testCase" cy-expect="visible" cy-label="Flex container with overflow hidden" style="display: flex; overflow: hidden; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Flex item 1" id="red" style="flex: 0 0 80%; background-color: lightgreen;">red</div>
+      <div class="testCase" cy-expect="visible" cy-label="Flex item 2" id="green" style="flex: 0 0 80%; background-color: lightgreen;">green</div>
+      <div class="testCase" cy-expect="hidden" cy-label="Flex item 3 out of bounds" id="blue" style="background-color: lightcoral;">blue</div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="overflow-complex-scenarios">
+    <h3>Complex Overflow Scenarios</h3>
+    
+    <!-- Overflow auto with flex layout -->
+    <div class="testCase" cy-expect="visible" cy-label="Flex layout with overflow auto" style="height: 200px; position: relative; display: flex; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Flex item with border" style="border: 5px solid red;">
+        <div class="testCase" cy-expect="visible" cy-label="Overflow auto container" id="breaking-container" style="overflow: auto; border: 5px solid green;">
+          <div class="testCase" cy-expect="visible" cy-label="Content container">
+            <h3 class="testCase" cy-expect="visible" cy-label="Heading">Example</h3>
+            <div class="testCase" cy-expect="visible" cy-label="Absolute positioned container" style="position: absolute; bottom: 5px;">
+              <button class="testCase" cy-expect="visible" cy-label="Relatively positioned button" id="visible-button" style="position: relative;">Try me</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Grid layout with overflow-y auto -->
+    <div class="testCase" cy-expect="visible" cy-label="Grid layout with overflow-y auto" style="display: grid; grid-template-columns: 332px 1fr; grid-template-rows: 62px 1fr; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Grid item with overflow-y auto" style="overflow-y: auto;">
+        <div class="testCase" cy-expect="visible" cy-label="Relative positioned container" style="height: 297px; position: relative;">
+          <div class="testCase" cy-expect="visible" cy-label="Absolute positioned item 1" style="height: 96px; position: absolute; left: 0; top: 0;">
+            <a class="testCase" cy-expect="visible" cy-label="Link 1" href="">test test-1</a>
+          </div>
+          <div class="testCase" cy-expect="hidden" cy-label="Absolute positioned item 2" style="height: 36px; position: absolute; left: 0; top: 96px; background-color: lightcoral;">
+            <a class="testCase" cy-expect="hidden" cy-label="Link 2" href="">test test-2</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="clip-scenarios">
+    <h3>Clip-Path Scenarios (note: legacy mode does not support clip-path)</h3>
+    
+    <!-- Clip-path polygon that clips everything -->
+    <div class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" cy-label="Parent with clip-path polygon that clips everything" style="position: relative; clip-path: polygon(0 0, 0 0, 0 0, 0 0); background: lightgreen;">
+      <span class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" cy-label="Element outside clip-path polygon" style="background: lightcoral;">clip-path child of polygon that clips everything</span>
+    </div>
+
+    <!-- Clip-path circle that shows everything -->
+    <div class="testCase" cy-expect="visible" cy-label="Parent with clip-path circle" style="position: relative; clip-path: circle(100%);">
+      <span class="testCase" cy-expect="visible" cy-label="Element inside clip-path circle" style="background: lightgreen;">clip-path</span>
+    </div>
+
+    <!-- Clip-path inset that clips content -->
+    <div class="testCase" cy-expect="visible" cy-label="Parent with clip-path inset" style="position: relative; clip-path: inset(25% 25% 25% 25%);">
+      <span class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" cy-label="Element outside clip-path inset" style="background: lightcoral;">clipped content</span>
+    </div>
+
+    <!-- Clip-path with complex polygon -->
+    <div class="testCase" cy-expect="visible" cy-label="Parent with complex clip-path" style="position: relative; clip-path: polygon(0% 0%, 100% 0%, 50% 100%);">
+      <span class="testCase" cy-expect="visible" cy-label="Element inside complex clip-path" style="background: lightgreen;">visible content</span>
+    </div>
+
+    <!-- Clip-path with ellipse -->
+    <div class="testCase" cy-expect="visible" cy-label="Parent with clip-path ellipse" style="position: relative; clip-path: ellipse(50% 50% at 50% 50%);">
+      <span class="testCase" cy-expect="visible" cy-label="Element inside clip-path ellipse" style="background: lightgreen;">elliptical content</span>
+    </div>
+
+    <!-- Clip-path with path (SVG path) -->
+    <div class="testCase" cy-expect="visible" cy-label="Parent with clip-path path" style="position: relative; clip-path: path('M 0 0 L 100 0 L 100 100 L 0 100 Z');">
+      <span class="testCase" cy-expect="visible" cy-label="Element inside clip-path path" style="background: lightgreen;">path content</span>
+    </div>
+
+    <!-- CSS clip property -->
+    <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Element clipped by CSS clip property" style="position: absolute; clip: rect(0, 0, 0, 0); background: lightcoral; width: 100px; height: 100px;">clipped by clip: rect(0,0,0,0)</div>
+
+    <!-- CSS mask property note: this yields an element that is not rendered as visible, but has a box model that is visible and is clickable -->
+    <div class="testCase" cy-expect="visible" cy-label="Element masked by CSS mask" style="width: 100px; height: 100px; background: lightcoral; mask: linear-gradient(black, black); mask-size: 0 0;">masked by CSS mask</div>
+  </div>
+
+  <div cy-section="viewport-scenarios">
+    <h3>Viewport Scenarios</h3>
+    <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Position absolute element outside viewport" style="position: absolute; top: -100px; left: -100px; width: 100px; height: 100px; background: lightcoral;">Element outside viewport</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Position fixed element outside of viewport" style="position: fixed; top: -100px; left: -100px; width: 100px; height: 100px; background: lightcoral;">Position fixed element outside of viewport</div>
+    <iframe style="display:none;">
+      <body>
+        <div class="testCase" cy-expect="hidden" cy-label="Element inside hidden iframe" style="width: 100px; height: 100px; background: lightcoral;">Element inside hidden iframe</div>
+      </body>
+    </iframe>
+  </div>
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/visibility/positioning.html b/packages/driver/cypress/fixtures/visibility/positioning.html
new file mode 100644
index 00000000000..03187ae62ed
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/positioning.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Positioning Visibility Tests</title>
+  <link rel="stylesheet" href="./style.css">
+  <script src="./ux.js"></script>
+</head>
+<body>
+    <h1>Positioning Visibility Tests</h1>
+    <div class="test-section" cy-section="positioning-with-zero-dimensions">
+      <h3>Positioning with Zero Dimensions</h3>
+      <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Zero dimensions parent with absolute positioned child" style="width: 0; height: 0; background: lightyellow">
+        <span class="testCase" cy-expect="visible" cy-label="Absolute positioned child under zero dimensions parent" style="position: absolute; top: 10px; left: 10px; background: white; padding: 5px;">Child with absolute positioning</span>
+      </div>
+    </div>
+  
+  <div class="test-section" cy-section="fixed-positioning-with-zero-dimensions">
+    <h3>Fixed Positioning with Zero Dimensions</h3>
+    
+    <!-- Zero dimensions parent with absolute positioned child -->
+
+    <!-- Zero dimensions ancestor with fixed positioned child -->
+    <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Zero dimensions ancestor with fixed positioned child" style="width: 0; height: 0; position: relative; background: green">
+      <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Parent under zero dimensions ancestor">
+        <span class="testCase" cy-expect="visible" cy-label="Fixed positioned child under zero dimensions ancestor" style="position: fixed; top: 10px; left: 10px; background: white; padding: 5px;">Child with position: fixed</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="static-ancestor-fixed-descendant">
+    <h3>Static ancestor with fixed positioned descendant</h3>
+    <!-- Position fixed descendant under normal ancestor -->
+    <div class="testCase" cy-expect="visible" cy-label="Normal ancestor with fixed positioned descendant" style="width: 100px; height: 100px; overflow: hidden; background: lightgreen;">
+      <div class="testCase" cy-expect="hidden" cy-label="Parent under normal ancestor">
+        <button class="testCase" cy-expect="visible" cy-label="Fixed positioned descendant under normal ancestor" style="position: fixed; top: 0; right: 0;">no width, descendant position: fixed</button>
+      </div>
+    </div>
+  </div>  
+
+  <div class="test-section" cy-section="position-fixed-element-covered-by-another">
+
+    <!-- Position fixed element covered by another element -->
+    <div class="testCase" cy-expect="hidden" cy-label="Fixed positioned element covered by another" style="position: fixed; bottom: 0; left: 0; background: lightcoral; width: 100px; height: 100px;">underneath</div>
+    <div class="testCase" cy-expect="visible" cy-label="Element covering fixed positioned element" style="position: fixed; bottom: 0; left: 0; background: lightskyblue; width: 100px; height: 100px;">on top</div>
+  </div>
+
+  <div class="test-section" cy-section="static-parent-fixed-child">
+    <h3>Static parent with a fixed child</h3>
+    
+    <!-- Position fixed child under normal parent -->
+    <div class="testCase" cy-expect="visible" cy-label="Normal parent with fixed positioned child" style="width: 100px; height: 100px; overflow: hidden; background: lightblue;">
+      <button class="testCase" cy-expect="visible" cy-label="Fixed positioned child under normal parent" style="position: fixed; top: 0;">position: fixed</button>
+    </div>
+  </div>
+  <div class="test-section" cy-section="position-fixed-element-off-screen">
+    <!-- Position fixed element off screen -->
+    <div class="testCase" cy-expect="hidden" cy-label="Fixed positioned element off screen" style="position: fixed; bottom: 0; left: -100px; background: lightgray;">off screen</div>
+
+    <!-- Position fixed element with pointer-events: none -->
+    <div class="testCase" cy-expect="visible" cy-label="Fixed positioned element with pointer-events none" style="position: fixed; top: 60px; background: lightcyan;">
+      <span class="testCase" cy-expect="visible" cy-label="Child with pointer-events none" style="pointer-events: none;">child pointer-events: none</span>
+    </div>
+  </div>
+  <div class="test-section" cy-section="parent-with-pointer-events-none">
+    <h3>Parent with pointer-events: none</h3>
+      <!-- Parent with pointer-events: none containing fixed positioned child -->
+      <div class="testCase" cy-expect="visible" cy-label="Parent with pointer-events none containing fixed child" style="pointer-events: none; background: lightyellow;">
+        <span class="testCase" cy-expect="visible" cy-label="Fixed child under pointer-events none parent" style="position: fixed; left: 0; top: 50%;">parent pointer-events: none</span>
+      </div>
+
+      <!-- Parent with pointer-events: none covered by another element -->
+      <div class="testCase" cy-expect="hidden" cy-label="Fixed child under pointer-events none parent covered by another" style="pointer-events: none; background: lightsteelblue;">
+        <span class="testCase" cy-expect="hidden" cy-label="Fixed child covered by another element" style="position: fixed; top: 40px;">parent pointer-events: none</span>
+      </div>
+      <div class="testCase" cy-expect="visible" cy-label="Element covering fixed child with pointer-events none parent" style="position: fixed; top: 40px; background: red;">covering the element with pointer-events: none</div>
+
+  </div>
+  <div class="test-section" cy-section="position-absolute-scenarios">
+    <h3>Position Absolute Scenarios</h3>
+    
+    <!-- Position absolute child under normal parent -->
+    <div class="testCase" cy-legacy-expect="hidden" cy-fast-expect="visible" cy-label="Normal parent with absolute positioned child" style="width: 0; height: 100px; overflow: hidden; background: lightblue;">
+      <div class="testCase" cy-legacy-expect="hidden" cy-fast-expect="visible" cy-label="Parent container for absolute child" style="height: 500px; width: 500px;">
+        <span class="testCase" cy-expect="visible" cy-label="Absolute positioned child" style="position: absolute;">position: absolute</span>
+      </div>
+    </div>
+
+    <!-- Position absolute descendant under normal ancestor -->
+    <div class="testCase" cy-legacy-expect="hidden" cy-fast-expect="visible" cy-label="Normal ancestor with absolute positioned descendant" style="width: 0; height: 100px; overflow: hidden; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Parent container for absolute descendant" style="height: 500px; width: 500px; position: absolute;">
+        <span class="testCase" cy-expect="visible" cy-label="Absolute positioned descendant" style="position: absolute;">no width, descendant position: absolute</span>
+      </div>
+    </div>
+
+    <!-- Parent with position absolute but child not positioned -->
+    <div class="testCase" cy-expect="hidden" cy-label="Parent with absolute positioning but child not positioned" style="width: 0; height: 100px; overflow: hidden; position: absolute; background: lightcoral;">
+      <div class="testCase" cy-expect="hidden" cy-label="Child container under absolute parent" style="height: 500px; width: 500px;">
+        <span class="testCase" cy-expect="hidden" cy-label="Non-positioned child under absolute parent">parent position: absolute</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="position-sticky-scenarios">
+    <h3>Position Sticky Scenarios</h3>
+    
+    <!-- Position sticky element -->
+    <div class="testCase" cy-expect="visible" cy-label="Sticky positioned element" style="position: sticky; top: 0; background: lightcyan; padding: 10px;">
+      <button class="testCase" cy-expect="visible" cy-label="Button inside sticky element" id="button">Sticky Button</button>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="positioning-cousin-coverage" >
+    <h3>Positioning Cousin Coverage</h3>
+
+    <!-- Element covered by an absolutely positioned cousin -->
+     <div style="position: relative;">
+      <div style="width: 200px; height: 100px; background: lightblue;">
+        <span class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" cy-label="Target element to be covered" style="display: block; width: 100px; height: 50px; background: lightgreen;">Target element</span>
+      </div>
+      <div class="testCase" cy-expect="visible" cy-label="Absolutely positioned cousin covering target" style="position: absolute; top: 0px; left: 0px; width: 100px; height: 50px; background: lightcoral;">Covering cousin</div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="z-index-coverage">
+    <h3>Z-Index Coverage</h3>
+    
+    <!-- Element covered by higher z-index element -->
+    <div style="position: relative; width: 300px; height: 150px; background: lightgray;">
+      <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Element covered by higher z-index" style="position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; background: lightgreen; z-index: 1;">Lower z-index element</div>
+      <div class="testCase" cy-expect="visible" cy-label="Higher z-index covering element" style="position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; background: lightcoral; z-index: 2;">Higher z-index element</div>
+    </div>
+  </div>
+
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/visibility/style.css b/packages/driver/cypress/fixtures/visibility/style.css
new file mode 100644
index 00000000000..e95a616f443
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/style.css
@@ -0,0 +1,21 @@
+body { margin: 20px; font-family: Arial, sans-serif; }
+.test-section { display:none; margin: 20px 0; padding: 10px; border: 1px solid #ccc; }
+.test-section h3 { margin-top: 0; }
+.test-section.active { display: block; }
+table { border-collapse: collapse; margin: 10px 0; }
+td, th { border: 1px solid #ccc; padding: 5px; }
+nav {
+  display: block;
+}
+nav li {
+  display: inline-block;
+  list-style: none;
+}
+
+[cy-expect="hidden"], [cy-legacy-expect="hidden"], [cy-fast-expect="hidden"] {
+  background-color: lightcoral;
+}
+
+[cy-expect="visible"], [cy-legacy-expect="visible"], [cy-fast-expect="visible"] {
+  background-color: lightgreen;
+}
diff --git a/packages/driver/cypress/fixtures/visibility/table-visibility.html b/packages/driver/cypress/fixtures/visibility/table-visibility.html
new file mode 100644
index 00000000000..0d533e0995c
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/table-visibility.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Table Visibility Tests</title>
+  <link rel="stylesheet" href="./style.css">
+  <script src="./ux.js"></script>
+</head>
+<body>
+  <h1>Table Visibility Tests</h1>
+  
+  <div class="test-section">
+    <h3>Visibility Collapse on Table Cells</h3>
+    <table>
+      <tr>
+        <td>Normal Cell</td>
+        <td id="collapse-cell" style="visibility: collapse;">Collapsed Cell</td>
+        <td>Another Normal Cell</td>
+      </tr>
+    </table>
+  </div>
+
+  <div class="test-section">
+    <h3>Visibility Collapse on Table Rows</h3>
+    <table>
+      <tr>
+        <td>Normal Row</td>
+        <td>Normal Row</td>
+      </tr>
+      <tr id="collapse-row" style="visibility: collapse;">
+        <td>Hidden Row Cell 1</td>
+        <td id="collapse-row-cell">Hidden Row Cell 2</td>
+      </tr>
+      <tr>
+        <td>Another Normal Row</td>
+        <td>Another Normal Row</td>
+      </tr>
+    </table>
+  </div>
+
+  <div class="test-section">
+    <h3>Mixed Visibility States</h3>
+    <table>
+      <tr>
+        <td>Normal</td>
+        <td id="mixed-collapse-cell" style="visibility: collapse;">Collapsed</td>
+        <td>Normal</td>
+      </tr>
+      <tr id="mixed-collapse-row" style="visibility: collapse;">
+        <td>Hidden Row</td>
+        <td id="mixed-collapse-row-cell">Hidden Row Cell</td>
+        <td>Hidden Row</td>
+      </tr>
+      <tr>
+        <td>Normal</td>
+        <td>Normal</td>
+        <td>Normal</td>
+      </tr>
+    </table>
+  </div>
+
+  <div class="test-section">
+    <h3>Normal Table (All Visible)</h3>
+    <table>
+      <tr>
+        <td>Normal Cell 1</td>
+        <td>Normal Cell 2</td>
+        <td>Normal Cell 3</td>
+      </tr>
+      <tr>
+        <td>Normal Row 2</td>
+        <td>Normal Row 2</td>
+        <td>Normal Row 2</td>
+      </tr>
+    </table>
+  </div>
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/visibility/transforms.html b/packages/driver/cypress/fixtures/visibility/transforms.html
new file mode 100644
index 00000000000..9f2a0998740
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/transforms.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Transform Visibility Tests</title>
+  <link rel="stylesheet" href="./style.css">
+  <script src="./ux.js"></script>
+</head>
+<body>
+  <h1>CSS Transform Scenarios</h1>
+
+  <div class="test-section" cy-section="scaling">
+    <h3>Scaling</h3>
+    <div class="testCase" cy-expect="hidden" cy-label="Scale to zero dimensions" style="transform: scale(0,0)">
+      <span class="testCase" cy-expect="hidden" cy-label="Child of scale(0,0)">Scaling(0,0)</span>
+    </div>
+    <div class="testCase" cy-expect="visible" cy-label="Scale to normal dimensions" style="display: block; width: 100px; height: 100px; background: lightgreen;transform: scale(1,1)">
+      <span class="testCase" cy-expect="visible" cy-label="Child of scale(1,1)">Scaling(1,1)</span>
+    </div>
+    <div class="testCase" cy-expect="visible" cy-label="Scale up dimensions" style="transform: scale(2, 3)">Scaled</div>
+    
+    <!-- Individual scale axes -->
+    <div class="testCase" cy-expect="hidden" cy-label="ScaleX to zero" style="transform: scaleX(0)">ScaleX(0)</div>
+    <div class="testCase" cy-expect="hidden" cy-label="ScaleY to zero" style="transform: scaleY(0)">ScaleY(0)</div>
+    <div class="testCase" cy-expect="hidden" cy-label="ScaleZ to zero" style="transform: scaleZ(0)">ScaleZ(0)</div>
+    
+    <!-- Multiple transforms with scale to zero -->
+    <div class="testCase" cy-expect="hidden" cy-label="Multiple transforms with scale to zero" style="transform: translate(15px, 30px) skew(20deg) rotate(40deg) scale(0, 0)">Multiple transforms with scale(0,0)</div>
+  </div>
+  <div class="test-section" cy-section="translation">
+    <h3>Translation</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Translate X negative" style="transform: translateX(-10px)">
+      <span class="testCase" cy-expect="visible" cy-label="Child of translateX(-10px)">Translation(-10px)</span>
+    </div>
+    <div class="testCase" cy-expect="visible" cy-label="Translate Y positive" style="transform: translateY(10px)">
+      <span class="testCase" cy-expect="visible" cy-label="Child of translateY(10px)">Translation(10px)</span>
+    </div>
+    <div class="testCase" cy-expect="visible" cy-label="Translate 2D" style="transform: translate(10px, 15px)">Translated in 2 dimensions</div>
+    <div class="testCase" cy-expect="visible" cy-label="Translate Z" style="transform: translateZ(10px)">Translated in 3rd dimension</div>
+    <div class="testCase" cy-expect="visible" cy-label="Translate 3D" style="transform: translate3d(10px, 15px, 20px)">Translated in 3 dimensions</div>
+    <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Translate outside viewport" style="transform: translateY(-9999px)">Translated outside viewport</div>
+  </div>
+  <div class="test-section" cy-section="rotation">
+    <h3>Rotation</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Rotate X axis" style="transform: rotateX(45deg)">Rotated on X axis</div>
+    <div class="testCase" cy-expect="visible" cy-label="Rotate Y axis" style="transform: rotateY(45deg)">Rotated on Y axis</div>
+    <div class="testCase" cy-expect="visible" cy-label="Rotate Z axis" style="transform: rotateZ(45deg)">Rotated on Z axis</div>
+    <div class="testCase" cy-expect="visible" cy-label="Rotate 3D" style="transform: rotate3d(1, 1, 1, 45deg)">Rotated on 3 axes</div>
+    
+    <!-- 90° rotations (which should be HIDDEN) -->
+    <div class="testCase" cy-expect="hidden" cy-label="RotateX 90deg" style="transform: rotateX(90deg)">RotateX(90deg)</div>
+    <div class="testCase" cy-expect="hidden" cy-label="RotateY 90deg" style="transform: rotateY(90deg)">RotateY(90deg)</div>
+    <div class="testCase" cy-expect="visible" cy-label="RotateZ 90deg" style="transform: rotateZ(90deg)">RotateZ(90deg)</div>
+    
+    <!-- Combined 90° rotations -->
+    <div class="testCase" cy-expect="hidden" cy-label="RotateX and RotateY 90deg" style="transform: rotateX(90deg) rotateY(90deg)">RotateX(90deg) rotateY(90deg)</div>
+    
+    <!-- Multiple transforms with 90° rotation -->
+    <div class="testCase" cy-expect="hidden" cy-label="Multiple transforms with rotateX 90deg" style="transform: rotateX(90deg) skew(30deg, 50deg) translate(15px, 60px) scale(3.5)">Multiple with rotateX(90deg)</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Multiple transforms with rotateY 90deg" style="transform: rotateY(90deg) skew(30deg, 50deg) translate(15px, 60px) scale(3.5)">Multiple with rotateY(90deg)</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Multiple transforms with rotateX and rotateY 90deg" style="transform: rotateX(90deg) rotateY(90deg) skew(30deg, 50deg) translate(15px, 60px) scale(3.5)">Multiple with rotateX(90deg) rotateY(90deg)</div>
+  </div>
+  <div class="test-section" cy-section="skew">
+    <h3>Skew</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Skew X axis" style="transform: skewX(45deg)">Skewed on X axis</div>
+    <div class="testCase" cy-expect="visible" cy-label="Skew Y axis" style="transform: skewY(45deg)">Skewed on Y axis</div>
+    <div class="testCase" cy-expect="visible" cy-label="Skew 2D" style="transform: skew(15deg, 15deg)">Skewed on 2 axes</div>
+  </div>
+  <div class="test-section" cy-section="matrix">
+    <h3>Matrix</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Identity matrix 2D" style="transform: matrix(1, 0, 0, 1, 0, 0)">Matrix(1, 0, 0, 1, 0, 0)</div>
+    <div class="testCase" cy-expect="visible" cy-label="Identity matrix 3D" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)">Matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)</div>
+  </div>
+  <div class="test-section" cy-section="perspective">
+    <h3>Perspective</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Perspective only" style="transform: perspective(100px)">Perspective(100px)</div>
+    <div class="testCase" cy-expect="visible" cy-label="Perspective with translateZ" style="transform: perspective(100px) translateZ(10px);background:lightgreen;">Perspective(100px) translateZ(10px)</div>
+    <div class="testCase" cy-expect="visible" cy-label="Perspective with rotateX" style="transform: perspective(100px) rotateX(45deg);background:lightgreen;">Perspective(100px) rotateX(45deg)</div>
+    <div class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" cy-label="Perspective with rotateY" style="transform: perspective(100px) rotateY(45deg); background:red;">Perspective(100px) rotateY(45deg)</div>
+    <div class="testCase" cy-expect="visible" cy-label="Perspective with rotateZ" style="transform: perspective(100px) rotateZ(45deg); background:lightgreen;">Perspective(100px) rotateZ(45deg)</div>
+  </div>
+  <div class="test-section" cy-section="multiple">
+    <h3>Multiple</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Multiple 2D transforms" style="transform: scale(2, 3) translate(1px, 1px) rotate(45deg) skew(15deg, 15deg) perspective(100px);width: 100px;height: 100px;background: lightgreen;">Multiple transforms</div>
+  </div>
+  <div class="test-section" cy-section="multiple-3d">
+    <h3>Multiple 3D</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Multiple 3D transforms" style="transform: scale3d(2, 3, 4) translate3d(10px, 15px, 20px) rotate3d(1, 1, 1, 45deg) skew3d(45deg, 45deg, 45deg) perspective3d(100px)">Multiple 3D transforms</div>
+  </div>
+
+  <div class="test-section" cy-section="transform-edge-cases">
+    <h3>Transform Edge Cases</h3>
+    
+    <!-- Transform with text content -->
+    <div class="testCase" cy-expect="visible" cy-label="Transform with text content" style="transform: translate(10px, 10px)">Translated with text</div>
+    <div class="testCase" cy-expect="visible" cy-label="Transform with skew only" style="transform: skew(10deg, 15deg)">Skewed with text</div>
+    <div class="testCase" cy-expect="visible" cy-label="Transform with rotation only" style="transform: rotate(20deg)">Rotated with text</div>
+    
+    <!-- Transform with zero dimensions but text content -->
+    <div class="testCase" cy-expect="visible" cy-label="Transform with zero height but text content" style="transform: translate(0, 0); height: 0;">Text content</div>
+    <div class="testCase" cy-expect="visible" cy-label="Transform with zero width but text content" style="transform: rotateX(30deg); width: 0;">Text content</div>
+    
+    <!-- Transform with zero dimensions and overflow -->
+    <div class="testCase" cy-expect="hidden" cy-label="ScaleX(0) with height and overflow hidden" style="transform: scaleX(0); height: 10px; overflow: hidden">
+      <p class="testCase" cy-expect="hidden" cy-label="Child of scaleX(0) with overflow hidden">Test</p>
+    </div>
+    
+    <!-- Transform with zero dimensions and overflow (different axes) -->
+    <div class="testCase" cy-expect="hidden" cy-label="Height 0 + transform + overflow hidden" style="height: 0px; transform: translate(1, 2); overflow: hidden">
+      <p class="testCase" cy-expect="hidden" cy-label="Child with height 0 + transform + overflow hidden">Test</p>
+    </div>
+    <div class="testCase" cy-expect="hidden" cy-label="Height 0 + transform + overflow-x hidden" style="height: 0px; transform: translate(1, 2); overflow-x: hidden">
+      <p class="testCase" cy-expect="hidden" cy-label="Child with height 0 + transform + overflow-x hidden">Test</p>
+    </div>
+    <div class="testCase" cy-expect="hidden" cy-label="Height 0 + transform + overflow-y hidden" style="height: 0px; transform: translate(1, 2); overflow-y: hidden">
+      <p class="testCase" cy-expect="hidden" cy-label="Child with height 0 + transform + overflow-y hidden">Test</p>
+    </div>
+    <div class="testCase" cy-expect="hidden" cy-label="Width 0 + transform + overflow hidden" style="width: 0px; transform: translate(1, 2); overflow: hidden">
+      <p class="testCase" cy-expect="hidden" cy-label="Child with width 0 + transform + overflow hidden">Test</p>
+    </div>
+    <div class="testCase" cy-expect="hidden" cy-label="Width 0 + transform + overflow-x hidden" style="width: 0px; transform: translate(1, 2); overflow-x: hidden">
+      <p class="testCase" cy-expect="hidden" cy-label="Child with width 0 + transform + overflow-x hidden">Test</p>
+    </div>
+    <div class="testCase" cy-expect="hidden" cy-label="Width 0 + transform + overflow-y hidden" style="width: 0px; transform: translate(1, 2); overflow-y: hidden">
+      <p class="testCase" cy-expect="hidden" cy-label="Child with width 0 + transform + overflow-y hidden">Test</p>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="backface-visibility">
+    <h3>Backface Visibility</h3>
+    <div class="testCase" cy-expect="hidden" cy-label="RotateX 180deg with hidden backface" style="transform: rotateX(180deg); backface-visibility: hidden">Backface hidden on X axis</div>
+    <div class="testCase" cy-expect="hidden" cy-label="RotateY 180deg with hidden backface" style="transform: rotateY(180deg); backface-visibility: hidden">Backface hidden on Y axis</div>
+    <div class="testCase" cy-expect="visible" cy-label="RotateZ 180deg with hidden backface" style="transform: rotateZ(180deg); backface-visibility: hidden">Backface hidden on Z axis</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Rotate3d 180deg with hidden backface" style="transform: rotate3d(1, 1, 1, 180deg); backface-visibility: hidden">Backface hidden on 3 axes</div>
+    <div class="testCase" cy-expect="visible" cy-label="RotateX 180deg with visible backface" style="transform: rotateX(180deg); backface-visibility: visible">Backface visible</div>
+    <div class="testCase" cy-expect="visible" cy-label="RotateY 45deg with hidden backface and no preserve-3d" style="transform: rotateY(45deg); backface-visibility: hidden;">
+      <div class="testCase" cy-expect="visible" cy-label="Nested rotateY 45deg with hidden backface but no preserve-3d" style="transform: rotateY(45deg); backface-visibility: hidden">Backface hidden on Y axis</div>
+    </div>
+    <div class="testCase" cy-expect="visible" cy-label="RotateY 45deg with visible backface and preserve-3d" style="transform: rotateY(45deg); backface-visibility: visible; transform-style: preserve-3d;">
+      <div>RotateY(45deg) with visible backface and preserve-3d</div>
+      <div class="testCase" cy-expect="hidden" cy-label="Nested rotateY 45deg with hidden backface and preserve-3d" style="transform: rotateY(45deg); backface-visibility: hidden; transform-style: preserve-3d">Backface hidden on Y axis</div>
+     
+      <div class="testCase" cy-expect="visible" cy-label="Nested rotateY -90deg with hidden backface and preserve-3d" style="transform: rotateY(-90deg); backface-visibility: hidden; transform-style: preserve-3d">Backface visible on Y axis</div>
+    </div>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/packages/driver/cypress/fixtures/visibility/ux.js b/packages/driver/cypress/fixtures/visibility/ux.js
new file mode 100644
index 00000000000..9810270f0e7
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/ux.js
@@ -0,0 +1,39 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const sections = document.querySelectorAll('.test-section').values().map((el) => {
+    return {
+      label: el.querySelector('h3')?.textContent ?? el.getAttribute('cy-section'),
+      section: el.getAttribute('cy-section'),
+    }
+  })
+  const nav = document.createElement('nav')
+
+  const list = document.createElement('ul')
+
+  nav.appendChild(list)
+  sections.forEach(({ label, section }) => {
+    const li = document.createElement('li')
+    const a = document.createElement('a')
+
+    a.href = `#${section}`
+    a.textContent = label
+    li.appendChild(a)
+    list.appendChild(li)
+  })
+
+  document.body.appendChild(nav)
+})
+
+document.addEventListener('click', (ev) => {
+  // eslint-disable-next-line no-console
+  console.log('click', ev.target)
+  const [, section] = ev.target?.href?.split('#') ?? []
+
+  if (!section) return
+
+  document.querySelectorAll('.test-section.active').forEach((el) => {
+    el.classList.remove('active')
+  })
+
+  document.querySelector(`[cy-section="${section}"]`)?.classList.add('active')
+  document.querySelector(`[cy-section="${section}"]`)?.scrollIntoView()
+})
diff --git a/packages/driver/src/dom/jquery.ts b/packages/driver/src/dom/jquery.ts
index e39b8366725..186375864db 100644
--- a/packages/driver/src/dom/jquery.ts
+++ b/packages/driver/src/dom/jquery.ts
@@ -2,7 +2,7 @@ import $ from 'jquery'
 import _ from 'lodash'
 
 // wrap the object in jquery
-const wrap = (obj) => {
+export const wrap = <T extends HTMLElement | Window | Document>(obj: T): JQuery<T> => {
   return $(obj)
 }
 
@@ -12,7 +12,7 @@ const query = (selector, context) => {
 }
 
 // pull out the raw elements if this is wrapped
-const unwrap = function (obj) {
+export const unwrap = function (obj) {
   if (isJquery(obj)) {
     // return an array of elements
     return obj.toArray()
@@ -21,7 +21,7 @@ const unwrap = function (obj) {
   return obj
 }
 
-const isJquery = (obj) => {
+export const isJquery = (obj: any): obj is JQuery<any> => {
   let hasJqueryProperty = false
 
   try {
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index abbf8476259..55d92358be8 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -4,25 +4,31 @@ import $document from './document'
 import $elements from './elements'
 import $coordinates from './coordinates'
 import * as $transform from './transform'
-
 const { isElement, isBody, isHTML, isOption, isOptgroup, getParent, getFirstParentWithTagName, isAncestor, isChild, getAllParents, isDescendent, isUndefinedOrHTMLBodyDoc, elOrAncestorIsFixedOrSticky, isDetached, isFocusable, stringify: stringifyElement } = $elements
-
+import { fastIsHidden } from './visibility/fastIsHidden'
 const fixedOrAbsoluteRe = /(fixed|absolute)/
 
 const OVERFLOW_PROPS = ['hidden', 'clip', 'scroll', 'auto']
 
+const { wrap } = $jquery
+
 const isVisible = (el) => {
   return !isHidden(el, 'isVisible()')
 }
 
-const { wrap } = $jquery
-
 // TODO: we should prob update dom
 // to be passed in $utils as a dependency
 // because of circular references
 // the ignoreOpacity option exists for checking actionability
 // as elements with `opacity: 0` are hidden yet actionable
+
 const isHidden = (el, methodName = 'isHidden()', options = { checkOpacity: true }) => {
+  if (Cypress.config('experimentalFastVisibility')) {
+    ensureEl(el, methodName)
+
+    return fastIsHidden(el, options)
+  }
+
   if (isStrictlyHidden(el, methodName, options, isHidden)) {
     return true
   }
diff --git a/packages/driver/src/dom/visibility/MIGRATION_GUIDE.md b/packages/driver/src/dom/visibility/MIGRATION_GUIDE.md
new file mode 100644
index 00000000000..93013e9829f
--- /dev/null
+++ b/packages/driver/src/dom/visibility/MIGRATION_GUIDE.md
@@ -0,0 +1,330 @@
+# Fast Visibility Algorithm Migration Guide
+
+_(note: this file or content similar to it will be added to cy docs, when language / details are finalized)_
+
+## Overview
+
+The fast visibility algorithm is designed to resolve severe performance issues with DOM visibility detection while maintaining compatibility with existing test code. This guide helps you understand the differences between legacy and fast algorithms and provides solutions for any compatibility issues that arise.
+
+## Why Migrate?
+
+### Performance Benefits
+- **Significantly faster** visibility calculations for complex DOM structures
+- **Reduced CPU usage** during test execution
+- **Better scalability** for applications with many DOM elements
+- **Improved test reliability** with more accurate geometric visibility detection
+
+### When to Enable Fast Visibility
+Enable fast visibility if you experience:
+- Slow test execution with complex DOM structures
+- High CPU usage during visibility checks
+- Timeouts or flaky tests related to element visibility
+- Performance degradation with many DOM elements
+
+### When NOT to Enable Fast Visibility
+**Do NOT enable fast visibility if:**
+- Your tests rely heavily on Shadow DOM elements
+- You have comprehensive Shadow DOM test coverage
+- Your application uses Shadow DOM extensively
+- You rely extensively on asserting the visibility of elements that are outside the browser's viewport
+- You rely on asserting the visibility state of elements that have `pointer-events:none`
+
+**Current Limitations**:
+- The fast visibility algorithm does not yet fully support Shadow DOM elements. Tests that interact with Shadow DOM elements may fail or behave incorrectly.
+- The fast visibility algorithm considers any element that is outside of the browser's viewport as hidden. While this is an incompatibility with the legacy visibility approach, it is aligned with the visibility behavior of elements that are scrolled out of view within a scrollable container.
+
+## Algorithm Differences
+
+While comprehensive, this list may not be complete. Additional discrepancies may be found and added to our test cases as they become known.
+
+| Test Section and Fixture | Test Case Label | "Legacy" Considers Visible? | "Fast" Considers Visible? | Correct Behavior | Notes |
+|---------|----------------|---------------------------|------------------------|------------------|-------|
+| **[transforms](../../../cypress/fixtures/visibility/transforms.html)** | Perspective with rotateY | ✅ Yes | ❌ No | ✅  Yes | Certain transforms can cause elements to not be considered visible to the fast visibility algorithm if they transform an element in such a way that it is not present at the points that are sampled |
+| **[positioning-with-zero-dimensions](../../../cypress/fixtures/visibility/positioning.html)** | Zero dimensions parent with absolute positioned child | ✅ Yes | ❌ No | ❌ No | Element that has `width: 0; height: 0` and an absolutely positioned child  |
+| **[fixed-positioning-with-zero-dimensions](../../../cypress/fixtures/visibility/positioning.html)** | Zero dimensions ancestor with fixed positioned child | ✅ Yes | ❌ No | ❌ No | Element that has `width: 0; height: 0; position: relative` and a fixed positioned grand-child. |
+| **[fixed-positioning-with-zero-dimensions](../../../cypress/fixtures/visibility/positioning.html)** | Parent under zero dimensions ancestor | ✅ Yes | ❌ No | ❌ No | Statically positioned element that is a child of an element with zero dimension, and whose only child is position:fixed |
+| **[position-absolute-scenarios](../../../cypress/fixtures/visibility/positioning.html)** | Normal parent with absolute positioned child | ❌ No | ✅ Yes | ❌ No | Element that is hidden by its parents overflow, but has an absolutely positioned child element. |
+| **[position-absolute-scenarios](../../../cypress/fixtures/visibility/positioning.html)** | Parent container for absolute child | ❌ No | ✅ Yes | ❌ No | Container element for the absolute positioned child  |
+| **[position-absolute-scenarios](../../../cypress/fixtures/visibility/positioning.html)** | Normal ancestor with absolute positioned descendant | ❌ No | ✅ Yes | ✅ Yes | Ancestor has `width: 0; height: 100px; overflow: hidden` with absolute positioned descendant |
+| **[positioning](../../../cypress/fixtures/visibility/positioning.html)** | Covered by an absolutely positioned cousin | ✅ Yes | ❌ No | ❌ No | Element covered by a sibling with `position: absolute` and higher z-index |
+| **[overflow-auto-with-zero-dimensions](../../../cypress/fixtures/visibility/overflow.html)** | Zero dimensions with overflow auto | ✅ Yes | ❌ No | ❌ No | Element with `width: 0; height: 0px; overflow: auto`, but no absolutely positioned children |
+| **[overflow-scroll-scenarios](../../../cypress/fixtures/visibility/overflow.html)** | Parent with clip-path polygon that clips everything | ✅ Yes | ❌ No | ❌ No | `clip-path: polygon(0 0, 0 0, 0 0, 0 0)`  |
+| **[overflow-scroll-scenarios](../../../cypress/fixtures/visibility/overflow.html)** | Element outside clip-path polygon | ✅ Yes | ❌ No | ❌ No | Child element of polygon clip-path parent |
+| **[overflow-scroll-scenarios](../../../cypress/fixtures/visibility/overflow.html)** | Element outside clip-path inset | ✅ Yes | ❌ No | ❌ No | Child element of `clip-path: inset(25% 25% 25% 25%)` |
+| **[viewport-scenarios](../../../cypress/fixtures/visibility/overflow.html)** | Absolutely positioned element outside of the viewport | ✅ Yes | ❌ No | ❌ No | Elements that are outside of the viewport must be scrolled to before the fast algorithm will consider them visible. This is aligned with scroll-container visibility. |
+| **[z-index-coverage](../../../cypress/fixtures/visibility/positioning.html)** | Covered by higher z-index element |  ✅ Yes | ❌ No | ❌ No | Element covered by another element with higher z-index |
+| **[clip-scenarios](../../../cypress/fixtures/visibility/overflow.html)** | Element clipped by CSS clip property |  ✅ Yes | ❌ No | ❌ No | Element with `clip: rect(0, 0, 0, 0)` or similar clipping |
+| **[transform](../../../cypress/fixtures/visibility/transforms.html)** | Element transformed outside viewport | ✅ Yes | ❌ No | ❌ No | Element with `transform: translateX(-9999px)` or similar |
+| **[contain](../../../cypress/fixtures/visibility/basic-css-properties.html)** | Element with CSS contain:paint property | ✅ Yes | ❌ No | ❌ No | Element positioned outside of a parent that has the `contain: paint` property |
+| **[backdrop-filter](../../../cypress/fixtures/visibility/basic-css-properties.html)** | Element covered by an element with with backdrop-filter opacity(0) | ✅ Yes | ❌ No | ❌ No|  |
+| **[pointer-events-none](../../../cypress/fixtures/visibility/basic-css-properties.html)** | Element with pointer-events: none | ✅ Yes | ❌ No | ❌ No | Element has dimensions and is visible to the user, but cannot receive pointer events. |
+
+## Migration Steps
+
+### Step 1: Enable Fast Visibility
+```javascript
+// cypress.config.js
+module.exports = {
+  e2e: {
+    experimentalFastVisibility: true
+  }
+}
+```
+
+**Note**: Ensure your application under test does not extensively use custom Shadow DOM elements, as the fast visibility algorithm does not yet support Shadow DOM.
+
+### Step 2: Run Your Tests
+Run your existing test suite to identify any failures:
+
+```bash
+npm run test
+```
+
+### Step 3: Analyze Failures
+Look for tests that fail with visibility-related assertions. Common patterns:
+
+```javascript
+// These assertions may behave differently
+.should('be.visible')
+.should('not.be.hidden')
+.is(':visible')
+.is(':hidden')
+```
+
+### Step 4: Disable Fast Visibility for Failing Specs
+For specs that fail due to Shadow DOM or other incompatibilities, disable fast visibility:
+
+```javascript
+// In failing spec files
+describe('My Test Suite', { experimentalFastVisibility: false }, () => {
+  it('should work with legacy visibility', () => {
+    // Your test here
+  })
+})
+```
+
+This allows you to gradually migrate specs while keeping failing ones working.
+
+### Step 5: Fix Tests with Visibility-Related Failures
+For specs that fail due to visibility algorithm differences, update the test expectations to match the correct behavior (see solutions below).
+
+## Common Compatibility Issues and Solutions
+
+### Issue 1: Elements Previously Considered Visible Are Now Hidden
+
+**Problem**: Test expects element to be visible, but fast algorithm correctly identifies it as hidden.
+
+**Solution**: Update your test expectations to match the correct behavior:
+
+```javascript
+// Before (incorrect expectation)
+cy.get('.rotated-element').should('be.visible')
+
+// After (correct expectation)
+cy.get('.rotated-element').should('be.hidden')
+```
+
+**Note**: If the element should be visible, fix the CSS in your application code, not in the test. Tests should verify the actual behavior of your application.
+
+### Issue 2: Elements Outside Viewport
+
+**Problem**: Elements positioned outside the viewport are now correctly identified as hidden.
+
+**Solution**: Scroll the element into view before testing:
+
+```javascript
+// Before
+cy.get('.off-screen-element').should('be.visible')
+
+// After
+cy.get('.off-screen-element').scrollIntoView().should('be.visible')
+```
+
+### Issue 3: Covered Elements
+
+**Problem**: Elements covered by other elements are now correctly identified as hidden.
+
+**Solution**: Test the covering element instead, or test the user interaction that reveals the covered element:
+
+```javascript
+// Before
+cy.get('.covered-element').should('be.visible')
+
+// After - test the covering element
+cy.get('.covering-element').should('be.visible')
+
+// Or test the user action that reveals the element
+cy.get('.toggle-button').click()
+cy.get('.covered-element').should('be.visible')
+```
+
+**Note**: Don't modify the DOM structure in tests. Test the actual user interactions that reveal hidden elements.
+
+### Issue 4: Zero-Dimension Containers
+
+**Problem**: Containers with zero dimensions are now correctly identified as hidden, but child elements may still be visible.
+
+**Solution**: Test the child element instead of the container:
+
+```javascript
+// Before - testing the container
+cy.get('.zero-dimension-container').should('be.visible')
+
+// After - test the child element that should be visible
+cy.get('.zero-dimension-container .child-element').should('be.visible')
+
+// Or test the user action that gives the container dimensions
+cy.get('.expand-button').click()
+cy.get('.zero-dimension-container').should('be.visible')
+```
+
+**Note**: If the container should have dimensions, fix this in your application code. If testing child elements, assert on the child elements directly.
+
+### Issue 5: Clipped Elements
+
+**Problem**: Elements clipped by CSS are now correctly identified as hidden.
+
+**Solution**: Update your test expectations or test the user interaction that reveals the element:
+
+```javascript
+// Before
+cy.get('.clipped-element').should('be.visible')
+
+// After - test that the element is hidden (correct behavior)
+cy.get('.clipped-element').should('be.hidden')
+
+// Or test the user action that reveals the element
+cy.get('.show-content-button').click()
+cy.get('.clipped-element').should('be.visible')
+
+// Or test the container that controls the clipping
+cy.get('.clipping-container').should('be.visible')
+```
+
+**Note**: If elements should be visible, fix the clipping in your application code. Tests should verify the actual user experience.
+
+### Issue 6: Pointer Events
+
+**Problem**: Elements with `pointer-events: none` or that have parents with `pointer-events:none` may be detected as hidden when they are visible.
+
+**Solution**: Do not assert visibility on elements with `pointer-events:none`, as they cannot be interacted with.
+
+### Issue 7: Shadow DOM incompatibilities
+
+**Problem:**: Elements inside shadow DOMs may not be detected properly as visible or hidden.
+
+**Solution:**: Test shadow dom components in isolation with component testing, and only test if the public interface of the shadow dom component is visible. You wouldn't assert on the visibility of the browser's default video play controls by querying its shadow dom: you would assert on the properties of the video element itself.
+
+## Rollback Plan
+
+If you encounter issues that can't be easily resolved:
+
+### Temporary Rollback
+```javascript
+// cypress.config.js
+module.exports = {
+  e2e: {
+    experimentalFastVisibility: false // Disable fast visibility
+  }
+}
+```
+
+### Gradual Migration
+Enable fast visibility for specific test suites:
+
+```javascript
+// Enable only for performance-critical tests
+describe('Performance Tests', { experimentalFastVisibility: true }, () => {
+  it('should handle complex DOM efficiently', () => {
+    // Your performance tests here
+  })
+})
+```
+
+## Best Practices
+
+### 1. Never Modify the Application Under Test (AUT)
+**❌ Bad Practice**: Modifying CSS or DOM structure in tests
+```javascript
+// DON'T DO THIS - Modifying the AUT
+cy.get('.element').invoke('css', 'display', 'block')
+cy.get('.element').invoke('remove')
+cy.get('.element').invoke('css', 'transform', 'none')
+```
+
+**✅ Good Practice**: Test the actual application behavior
+```javascript
+// DO THIS - Test real user interactions
+cy.get('.toggle-button').click()
+cy.get('.element').should('be.visible')
+```
+
+### 2. Test Element Functionality, Not Just Visibility
+```javascript
+// Good: Test if element is interactive
+cy.get('.button').should('be.enabled').click()
+
+// Avoid: Testing visibility alone
+cy.get('.button').should('be.visible')
+```
+
+### 3. Use Semantic Selectors
+```javascript
+// Good: Use semantic selectors
+cy.get('[data-testid="submit-button"]').should('be.visible')
+
+// Avoid: Relying on CSS classes that might change
+cy.get('.btn-primary').should('be.visible')
+```
+
+### 4. Test User Interactions
+```javascript
+// Good: Test user interactions
+cy.get('.modal').should('be.visible')
+cy.get('.modal .close-button').click()
+cy.get('.modal').should('not.exist')
+
+// Avoid: Testing CSS properties directly
+cy.get('.modal').should('have.css', 'display', 'block')
+```
+
+## Troubleshooting
+
+### Common Error Messages
+
+**"Element is not visible"**
+- Check if element is covered by another element
+- Verify element is not positioned outside viewport
+- Ensure element has proper dimensions
+
+**"Element should be hidden but is visible"**
+- Check for CSS transforms that might hide the element
+- Verify element is not clipped by CSS
+- Ensure element is not covered by other elements
+
+**Shadow DOM Related Errors**
+- If you see errors with Shadow DOM elements, disable fast visibility
+- Shadow DOM support is not yet available in the fast algorithm
+- Use legacy algorithm for Shadow DOM testing until support is added
+
+### Debug Visibility Issues
+```javascript
+// Debug element visibility
+cy.get('.element').then(($el) => {
+  console.log('Element dimensions:', $el[0].getBoundingClientRect())
+  console.log('Element styles:', $el[0].computedStyleMap())
+  console.log('Element visibility:', Cypress.dom.isVisible($el[0]))
+})
+```
+
+## Final Words
+
+The fast visibility algorithm is an experimental feature that provides significant performance improvements for applications with complex DOM structures. While we try to align compatibility with the legacy algorithm, we err on the side of accuracy: the fast algorithm provides more geometrically correct visibility detection.
+
+**Important Notes:**
+- This is an **experimental feature** - if it proves beneficial, we may invest time in supporting Shadow DOM
+- **Shadow DOM support is not yet available** - disable fast visibility for specs that rely heavily on Shadow DOM
+- **Some compatibility differences exist** - when tests fail, the fast algorithm is likely correct and tests should be updated
+- **Performance benefits are significant** - especially for applications with many DOM elements or complex layouts
+
+By following this migration guide, you can resolve compatibility issues and benefit from faster, more accurate visibility detection while understanding the current limitations.
diff --git a/packages/driver/src/dom/visibility/fastIsHidden.ts b/packages/driver/src/dom/visibility/fastIsHidden.ts
new file mode 100644
index 00000000000..19bf988b677
--- /dev/null
+++ b/packages/driver/src/dom/visibility/fastIsHidden.ts
@@ -0,0 +1,46 @@
+import $elements from '../elements'
+import { unwrap, isJquery } from '../jquery'
+const { isOption, isOptgroup, isBody, isHTML } = $elements
+import { VisibilityTests, VisibilityResultKind } from './visibility-tests/VisibilityTest'
+
+interface VisibilityOptions {
+  checkOpacity: boolean
+}
+
+export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, options: VisibilityOptions = { checkOpacity: true }): boolean {
+  if (isBody(subject) || isHTML(subject)) {
+    return false
+  }
+
+  if (isJquery(subject)) {
+    const subjects = unwrap(subject) as HTMLElement | HTMLElement[]
+
+    if (Array.isArray(subjects)) {
+      return subjects.some((subject: HTMLElement) => fastIsHidden(subject, options))
+    }
+
+    return fastIsHidden(subjects, options)
+  }
+
+  if (isOption(subject) || isOptgroup(subject)) {
+    if (subject.hasAttribute('style') && subject.style.display === 'none') {
+      return true
+    }
+
+    const select = subject.closest('select')
+
+    if (select) {
+      return fastIsHidden(select, options)
+    }
+  }
+
+  for (const test of VisibilityTests) {
+    const result = test(subject, options)
+
+    if (result) {
+      return result.kind === VisibilityResultKind.HIDDEN
+    }
+  }
+
+  return false
+}
diff --git a/packages/driver/src/dom/visibility/visibility-tests/VisibilityTest.ts b/packages/driver/src/dom/visibility/visibility-tests/VisibilityTest.ts
new file mode 100644
index 00000000000..3c12c097643
--- /dev/null
+++ b/packages/driver/src/dom/visibility/visibility-tests/VisibilityTest.ts
@@ -0,0 +1,25 @@
+import { dimensions } from './dimensions'
+import { domVisibility } from './domVisibility'
+import { pointSampling } from './pointSampling'
+
+export const VisibilityResultKind = Object.freeze({
+  VISIBLE: 'visible',
+  HIDDEN: 'hidden',
+})
+
+type VisibilityTestResultKind = typeof VisibilityResultKind[keyof typeof VisibilityResultKind]
+
+export interface VisibilityTestResult {
+  kind: VisibilityTestResultKind
+  reason: string
+}
+
+export interface VisibilityTest {
+  (el: HTMLElement): VisibilityTestResult | undefined
+}
+
+export const VisibilityTests: VisibilityTest[] = [
+  dimensions,
+  domVisibility,
+  pointSampling,
+]
diff --git a/packages/driver/src/dom/visibility/visibility-tests/dimensions.ts b/packages/driver/src/dom/visibility/visibility-tests/dimensions.ts
new file mode 100644
index 00000000000..b32f74e14d3
--- /dev/null
+++ b/packages/driver/src/dom/visibility/visibility-tests/dimensions.ts
@@ -0,0 +1,8 @@
+import { getBoundingClientRect } from './getBoundingClientRect'
+import { VisibilityResultKind, VisibilityTestResult } from './VisibilityTest'
+
+export function dimensions (subject: HTMLElement, options: VisibilityOptions): VisibilityTestResult | undefined {
+  const boundingRect = getBoundingClientRect(subject)
+
+  return boundingRect.width === 0 || boundingRect.height === 0 ? VisibilityResultKind.HIDDEN : undefined
+}
diff --git a/packages/driver/src/dom/visibility/visibility-tests/domVisibility.ts b/packages/driver/src/dom/visibility/visibility-tests/domVisibility.ts
new file mode 100644
index 00000000000..00b54b2db36
--- /dev/null
+++ b/packages/driver/src/dom/visibility/visibility-tests/domVisibility.ts
@@ -0,0 +1,9 @@
+import { VisibilityResultKind } from './VisibilityTest'
+
+export function domVisibility (subject: HTMLElement, options: VisibilityOptions): VisibilityTestResult | undefined {
+  return subject.checkVisibility({
+    contentVisibilityAuto: true,
+    opacityProperty: options.checkOpacity,
+    visibilityProperty: true,
+  }) ? VisibilityResultKind.VISIBLE : undefined
+}
diff --git a/packages/driver/src/dom/visibility/visibility-tests/getBoundingClientRect.ts b/packages/driver/src/dom/visibility/visibility-tests/getBoundingClientRect.ts
new file mode 100644
index 00000000000..cdb9a622c0b
--- /dev/null
+++ b/packages/driver/src/dom/visibility/visibility-tests/getBoundingClientRect.ts
@@ -0,0 +1,5 @@
+import { memoize } from './memoize'
+
+export const getBoundingClientRect = memoize(
+  (el: HTMLElement) => el.getBoundingClientRect(),
+)
diff --git a/packages/driver/src/dom/visibility/visibility-tests/memoize.ts b/packages/driver/src/dom/visibility/visibility-tests/memoize.ts
new file mode 100644
index 00000000000..0f4e4ced626
--- /dev/null
+++ b/packages/driver/src/dom/visibility/visibility-tests/memoize.ts
@@ -0,0 +1,44 @@
+interface MemoizeOptions<
+  IndexFn extends (...args: any[]) => any,
+  Key = IndexFn extends (...args: any[]) => infer I ? I : never
+> {
+  ttl?: number
+  key?: (...args: Parameters<T>) => Key
+}
+
+export function memoize<T extends (...args: any[]) => any> (
+  fn: T,
+  options?: MemoizeOptions<T>): T {
+  const ttl = options?.ttl ?? 100
+  const keyFn = options?.key ?? ((args: Parameters<T>) => args[0])
+
+  const cache = new Map<ReturnType<typeof keyFn>, { result: ReturnType<T>, timestamp: number }>()
+
+  let sweepTimeout: NodeJS.Timeout | undefined
+
+  const sweep = () => {
+    sweepTimeout = undefined
+    cache.forEach((value, key) => {
+      if (value.timestamp < Date.now() - ttl) {
+        cache.delete(key)
+      }
+    })
+  }
+
+  return (...args: any[]) => {
+    sweepTimeout = sweepTimeout || setTimeout(sweep, ttl)
+
+    const key = keyFn(args)
+    const cached = cache.get(key)
+
+    if (cached && cached.timestamp > Date.now() - ttl) {
+      return cached.result
+    }
+
+    const result = fn(...args)
+
+    cache.set(key, { result, timestamp: Date.now() })
+
+    return result
+  }
+}
diff --git a/packages/driver/src/dom/visibility/visibility-tests/pointSampling.ts b/packages/driver/src/dom/visibility/visibility-tests/pointSampling.ts
new file mode 100644
index 00000000000..867e6917155
--- /dev/null
+++ b/packages/driver/src/dom/visibility/visibility-tests/pointSampling.ts
@@ -0,0 +1,67 @@
+import { getBoundingClientRect } from './getBoundingClientRect'
+import { memoize } from './memoize'
+import { VisibilityResultKind } from './VisibilityTest'
+
+const MAX_DEPTH = 2
+const MIN_SIZE = 1
+
+const SUBDIVIDE_PATTERN = [
+  [0, 0],
+  [1, 0],
+  [0, 1],
+  [1, 1],
+] as const
+
+const SAMPLE_POINTS = [
+  ...SUBDIVIDE_PATTERN,
+  [0.5, 0.5],
+] as const
+
+export function pointSampling (subject: HTMLElement, options: VisibilityOptions): VisibilityTestResult | undefined {
+  const boundingRect = getBoundingClientRect(subject)
+
+  return sampleDomRectPoints(subject, boundingRect) ? VisibilityResultKind.VISIBLE : undefined
+}
+
+function sampleDomRectPoints (el: HTMLElement, rect: DOMRect, currentDepth: number = 0): boolean {
+  if (currentDepth >= MAX_DEPTH) {
+    return false
+  }
+
+  const { x, y, width, height } = rect
+
+  const samples = SAMPLE_POINTS.map(([pX, pY]) => [x + pX * width, y + pY * height])
+
+  if (samples.some(([x, y]) => visibleAtPoint(el, x, y))) {
+    return true
+  }
+
+  const subRects = subDivideRect(rect)
+
+  debug('subRects', subRects)
+
+  return subRects.some((subRect: DOMRect) => {
+    return visibleToUser(el, subRect, maxDepth, currentDepth + 1)
+  })
+}
+
+function subDivideRect ({ x, y, width, height }: DOMRect): DOMRect[] {
+  return SUBDIVIDE_PATTERN.map(([dX, dY]) => {
+    const validDim = width / 2 > MIN_SIZE && height / 2 > MIN_SIZE
+
+    return validDim ? DOMRect.fromRect({
+      x: x + dX * (width / 2),
+      y: y + dY * (height / 2),
+      width: width / 2,
+      height: height / 2,
+    }) : undefined
+  }).filter(Boolean)
+}
+
+const visibleAtPoint = memoize(function (el: HTMLElement, x: number, y: number): boolean {
+  const elAtPoint = el.ownerDocument.elementFromPoint(x, y)
+
+  debug('visibleAtPoint', el, elAtPoint)
+
+  return Boolean(elAtPoint) && (elAtPoint === el || el.contains(elAtPoint))
+})
diff --git a/packages/driver/src/dom/visibility/visibleToUser.ts b/packages/driver/src/dom/visibility/visibleToUser.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/driver/test/unit/dom/visibility/memoize.spec.ts b/packages/driver/test/unit/dom/visibility/memoize.spec.ts
new file mode 100644
index 00000000000..e6237dc24c7
--- /dev/null
+++ b/packages/driver/test/unit/dom/visibility/memoize.spec.ts
@@ -0,0 +1,64 @@
+import { memoize } from '@packages/driver/src/dom/visibility/memoize'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+
+describe('memoize', () => {
+  let fn: vi.Mock
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    fn = vi.fn().mockReturnValue('output')
+  })
+
+  afterEach(() => {
+    vi.clearAllTimers()
+    vi.useRealTimers()
+    vi.restoreAllMocks()
+  })
+
+  it('should memoize the result of the function', () => {
+    const memoizedFn = memoize(fn, { ttl: 1000 })
+    const result = memoizedFn('input')
+
+    expect(fn).toHaveBeenCalledWith('input')
+    expect(result).toBe('output')
+  })
+
+  it('should return the cached result if the function is called with the same arguments', () => {
+    const memoizedFn = memoize(fn, { ttl: 1000 })
+    const result1 = memoizedFn(1)
+    const result2 = memoizedFn(1)
+
+    expect(fn).toHaveBeenCalledWith(1)
+    expect(fn).toHaveBeenCalledOnce()
+    expect(result1).toBe('output')
+    expect(result2).toBe('output')
+  })
+
+  it('should sweep the cache after the ttl', () => {
+    const memoizedFn = memoize(fn, { ttl: 1000 })
+    const result1 = memoizedFn('input')
+
+    expect(fn).toHaveBeenCalledWith('input')
+    expect(fn).toHaveBeenCalledTimes(1)
+    expect(result1).toBe('output')
+
+    vi.advanceTimersByTime(1000)
+
+    const result3 = memoizedFn('input')
+
+    expect(fn).toHaveBeenCalledWith('input')
+    expect(fn).toHaveBeenCalledTimes(2)
+    expect(result3).toBe('output')
+  })
+
+  it('supports complex arguments with a custom key function', () => {
+    const memoizedFn = memoize(fn, { ttl: 1000, key: (args) => JSON.stringify(args) })
+    const result1 = memoizedFn({ a: 'input-1', b: 'input-2' })
+    const result2 = memoizedFn({ a: 'input-1', b: 'input-2' })
+
+    expect(fn).toHaveBeenCalledWith({ a: 'input-1', b: 'input-2' })
+    expect(fn).toHaveBeenCalledTimes(1)
+    expect(result1).toBe('output')
+    expect(result2).toBe('output')
+  })
+})