From 8b1182f923b48f1cdc98727baf43732dea78c9a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Fri, 29 Mar 2024 11:11:12 +0100
Subject: [PATCH 01/47] first working version

---
 packages/driver/src/dom/visibility.ts | 97 ++++++++++++++++-----------
 1 file changed, 56 insertions(+), 41 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 2a92fae2b963..6d2b0eca7f7c 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -133,13 +133,13 @@ const elHasNoEffectiveWidthOrHeight = ($el) => {
   const el = $el[0]
   const style = getComputedStyle(el)
   const transform = style.getPropertyValue('transform')
-  const width = elOffsetWidth($el)
-  const height = elOffsetHeight($el)
+  const width = elClientWidth($el)
+  const height = elClientHeight($el)
   const overflowHidden = elHasOverflowHidden($el)
 
   return isZeroLengthAndTransformNone(width, height, transform) ||
-  isZeroLengthAndOverflowHidden(width, height, overflowHidden) ||
-  (el.getClientRects().length <= 0)
+    isZeroLengthAndOverflowHidden(width, height, overflowHidden) ||
+    (el.getClientRects().length <= 0)
 }
 
 const isZeroLengthAndTransformNone = (width, height, transform) => {
@@ -149,24 +149,24 @@ const isZeroLengthAndTransformNone = (width, height, transform) => {
   // That's why we're checking `transform === 'none'` together with elOffsetWidth/Height.
 
   return (width <= 0 && transform === 'none') ||
-  (height <= 0 && transform === 'none')
+    (height <= 0 && transform === 'none')
 }
 
 const isZeroLengthAndOverflowHidden = (width, height, overflowHidden) => {
   return (width <= 0 && overflowHidden) ||
-  (height <= 0 && overflowHidden)
+    (height <= 0 && overflowHidden)
 }
 
-const elHasNoOffsetWidthOrHeight = ($el) => {
-  return (elOffsetWidth($el) <= 0) || (elOffsetHeight($el) <= 0)
+const elClientWidth = ($el) => {
+  return $el[0].getBoundingClientRect().width
 }
 
-const elOffsetWidth = ($el) => {
-  return $el[0].offsetWidth
+const elClientHeight = ($el) => {
+  return $el[0].getBoundingClientRect().height
 }
 
-const elOffsetHeight = ($el) => {
-  return $el[0].offsetHeight
+const elHasNoClientWidthOrHeight = ($el) => {
+  return (elClientWidth($el) <= 0) || (elClientHeight($el) <= 0)
 }
 
 const elHasVisibilityHiddenOrCollapse = ($el) => {
@@ -193,10 +193,20 @@ const elHasDisplayInline = ($el) => {
   return $el.css('display') === 'inline'
 }
 
-const elHasOverflowHidden = function ($el) {
-  const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
+const elHasOverflowHidden = function ($el: JQuery<HTMLElement>) {
+  let styles = getComputedStyle($el[0])
 
-  return cssOverflow.includes('hidden')
+  if (styles.getPropertyValue('grid')) {
+    return false
+  }
+
+  if (styles.getPropertyValue('overflow') === 'hidden'
+    || styles.getPropertyValue('overflow-y') === 'hidden'
+    || styles.getPropertyValue('overflow-x') === 'hidden') {
+    return true
+  }
+
+  return false
 }
 
 const elHasPositionRelative = ($el) => {
@@ -209,8 +219,8 @@ const elHasPositionAbsolute = ($el) => {
 
 const elHasClippableOverflow = function ($el) {
   return OVERFLOW_PROPS.includes($el.css('overflow')) ||
-          OVERFLOW_PROPS.includes($el.css('overflow-y')) ||
-            OVERFLOW_PROPS.includes($el.css('overflow-x'))
+    OVERFLOW_PROPS.includes($el.css('overflow-y')) ||
+    OVERFLOW_PROPS.includes($el.css('overflow-x'))
 }
 
 const canClipContent = function ($el, $ancestor) {
@@ -317,29 +327,34 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent(
   }
 
   if (canClipContent($el, $ancestor)) {
-    const elProps = $coordinates.getElementPositioning($el)
-    const ancestorProps = $coordinates.getElementPositioning($ancestor)
+    if ($el[0] instanceof DOMRect && $ancestor[0] instanceof DOMRect) {
+      const elProp = $el.getBoundingClientRect()
+      const ancestorProp = $ancestor[0].getBoundingClientRect()
 
-    if (elHasPositionAbsolute($el) && (ancestorProps.width === 0 || ancestorProps.height === 0)) {
-      return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
-    }
+      if (elHasPositionAbsolute($el) && (ancestorProp.width === 0 || ancestorProp.height === 0)) {
+        return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
+      }
 
-    // target el is out of bounds
-    if (
-      // target el is to the right of the ancestor's visible area
-      (elProps.fromElWindow.left >= (ancestorProps.width + ancestorProps.fromElWindow.left)) ||
+      // target el is out of bounds
+      if (
+        // target el is to the right of the ancestor's visible area
+        (elProp.left >= (ancestorProp.width + ancestorProp.left)) ||
 
-      // target el is to the left of the ancestor's visible area
-      ((elProps.fromElWindow.left + elProps.width) <= ancestorProps.fromElWindow.left) ||
+        // target el is to the left of the ancestor's visible area
+        ((elProp.left + elProp.width) <= ancestorProp.left) ||
 
-      // target el is under the ancestor's visible area
-      (elProps.fromElWindow.top >= (ancestorProps.height + ancestorProps.fromElWindow.top)) ||
+        // target el is under the ancestor's visible area
+        (elProp.top >= (ancestorProp.height + ancestorProp.top)) ||
 
-      // target el is above the ancestor's visible area
-      ((elProps.fromElWindow.top + elProps.height) <= ancestorProps.fromElWindow.top)
-    ) {
-      return true
+        // target el is above the ancestor's visible area
+        ((elProp.top + elProp.height) <= ancestorProp.top)
+      ) {
+        return true
+      }
     }
+    // else {
+    //   return false
+    // }
   }
 
   return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
@@ -463,8 +478,8 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true }
   // either being covered or there is no el
 
   const node = stringifyElement($el, 'short')
-  let width = elOffsetWidth($el)
-  let height = elOffsetHeight($el)
+  let width = elClientWidth($el)
+  let height = elClientHeight($el)
   let $parent
   let parentNode
 
@@ -513,8 +528,8 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true }
     return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`opacity: 0\``
   }
 
-  if (elHasNoOffsetWidthOrHeight($el)) {
-    return `This element \`${node}\` is not visible because it has an effective width and height of: \`${width} x ${height}\` pixels.`
+  if (elHasNoClientWidthOrHeight($el)) {
+    return `This element \`${node}\` is not visible because it has an client width and height of: \`${width} x ${height}\` pixels.`
   }
 
   const transformResult = $transform.detectVisibility($el)
@@ -529,10 +544,10 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true }
 
   if ($parent = parentHasNoOffsetWidthOrHeightAndOverflowHidden(getParent($el))) {
     parentNode = stringifyElement($parent, 'short')
-    width = elOffsetWidth($parent)
-    height = elOffsetHeight($parent)
+    width = elClientWidth($parent)
+    height = elClientHeight($parent)
 
-    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`overflow: hidden\` and an effective width and height of: \`${width} x ${height}\` pixels.`
+    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`overflow: hidden\` and an client width and height of: \`${width} x ${height}\` pixels.`
   }
 
   // nested else --___________--

From da6825f1698b63b1d85362eb39335fea4d645fd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Fri, 29 Mar 2024 11:14:27 +0100
Subject: [PATCH 02/47] clean commented code

---
 packages/driver/src/dom/visibility.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 6d2b0eca7f7c..95f3e94e41b3 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -352,9 +352,6 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent(
         return true
       }
     }
-    // else {
-    //   return false
-    // }
   }
 
   return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))

From f4278d0e1e68e5910936d570ae80d75b7ad9f84a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Fri, 29 Mar 2024 11:22:00 +0100
Subject: [PATCH 03/47] clean

---
 packages/driver/src/dom/visibility.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 95f3e94e41b3..ff403b215509 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -196,7 +196,7 @@ const elHasDisplayInline = ($el) => {
 const elHasOverflowHidden = function ($el: JQuery<HTMLElement>) {
   let styles = getComputedStyle($el[0])
 
-  if (styles.getPropertyValue('grid')) {
+  if (styles.getPropertyValue('grid')) { //we ignore hidden when grid used
     return false
   }
 

From 7d08741331f0aad5fa1818c63d20ef53afbb050b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Fri, 29 Mar 2024 12:50:58 +0100
Subject: [PATCH 04/47] changelog update

---
 cli/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index b2055cbbecb1..11feea8633f8 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,4 +1,8 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+
+**Bugfixes:**
+- Fixed an issue where Cypress not detect visible elements with width or height in rem as visible [#29172](https://github.com/cypress-io/cypress/issues/29093).
+
 ## 13.7.1
 
 _Released 3/21/2024_

From bd82c5de6926a41dee11d3dc5de54496e6c5d8aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Fri, 29 Mar 2024 13:53:51 +0100
Subject: [PATCH 05/47] fix pipeline bug

---
 cli/CHANGELOG.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index f775ae980b70..5af606620878 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,6 +1,5 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
 
-## 13.7.2
 
 _Released 4/2/2024 (PENDING)_
 

From bbeb1bb3695103e92645c64c1cf92552203c4306 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Fri, 29 Mar 2024 13:56:44 +0100
Subject: [PATCH 06/47] fix pipeline for line2

---
 cli/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 5af606620878..999b0b4331e4 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,5 +1,5 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
-
+## 13.7.2
 
 _Released 4/2/2024 (PENDING)_
 

From 71cdb9360b4290dcb9db6aa2069fac6a69bc4d7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Fri, 29 Mar 2024 13:59:34 +0100
Subject: [PATCH 07/47] fix pipeline3

---
 cli/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 999b0b4331e4..babcdba066ad 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -7,7 +7,7 @@ _Released 4/2/2024 (PENDING)_
 
 - Fixed an issue where Cypress was not executing beyond the first spec in `cypress run` for versions of Firefox 124 and up when a custom user agent was provided. Fixes [#29190](https://github.com/cypress-io/cypress/issues/29190).
 - Fixed a bug where fields using arrays in `cypress.config` are not correctly processed. Fixes [#27103](https://github.com/cypress-io/cypress/issues/27103). Fixed in [#27312](https://github.com/cypress-io/cypress/pull/27312).
-- Fixed an issue where Cypress not detect visible elements with width or height in rem as visible [#29172](https://github.com/cypress-io/cypress/issues/29093).
+- Fixed an issue where Cypress not detect visible elements with width or height in rem as visible [#29172](https://github.com/cypress-io/cypress/issues/29093). Fixed in [#29224](https://github.com/cypress-io/cypress/pull/29224).
 
 
 ## 13.7.1

From b15254cf6839e2f536cd9d2f2590412e1f81126f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 2 Apr 2024 13:14:58 +0200
Subject: [PATCH 08/47] error reproduction

---
 .../driver/cypress/e2e/issues/29093.cy.js     | 12 ++++++
 .../driver/cypress/fixtures/issue-29093.html  | 37 +++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 packages/driver/cypress/e2e/issues/29093.cy.js
 create mode 100644 packages/driver/cypress/fixtures/issue-29093.html

diff --git a/packages/driver/cypress/e2e/issues/29093.cy.js b/packages/driver/cypress/e2e/issues/29093.cy.js
new file mode 100644
index 000000000000..7f62c965f0d1
--- /dev/null
+++ b/packages/driver/cypress/e2e/issues/29093.cy.js
@@ -0,0 +1,12 @@
+// https://github.com/cypress-io/cypress/issues/29093
+describe('issue 29093', () => {
+  before(() => {
+    cy
+    .viewport('macbook-16')
+    .visit('/fixtures/issue-29093.html')
+  })
+
+  it('can click selection when rem width used', () => {
+    cy.get('#sidebar-left > section').click()
+  })
+})
diff --git a/packages/driver/cypress/fixtures/issue-29093.html b/packages/driver/cypress/fixtures/issue-29093.html
new file mode 100644
index 000000000000..9a09bcaca713
--- /dev/null
+++ b/packages/driver/cypress/fixtures/issue-29093.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+
+<head>
+  <meta charset="utf-8" />
+  <title>29093 repro</title>
+  <style id="compiled-css" type="text/css">
+    .big {
+      font-size: 128px;
+    }
+
+    .contents {
+      display: contents
+    }
+
+    .overflow-hidden {
+      overflow: hidden
+    }
+
+    @media (min-width: 1024px) {
+      .lg\:grid {
+        display: grid
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="overflow-hidden contents">
+    <aside id="sidebar-left" class="lg:w-auto">
+      <section class="b-4">
+        <p class="big">IN SECTION</p>
+      </section>
+    </aside>
+  </div>
+</body>
+</html>
\ No newline at end of file

From 0e52c9091af834cfefa88d7a98ad6c5083355043 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 2 Apr 2024 13:16:06 +0200
Subject: [PATCH 09/47] go back to previous commend for tests

---
 packages/driver/src/dom/visibility.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index ff403b215509..45e2f86248cb 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -526,7 +526,7 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true }
   }
 
   if (elHasNoClientWidthOrHeight($el)) {
-    return `This element \`${node}\` is not visible because it has an client width and height of: \`${width} x ${height}\` pixels.`
+    return `This element \`${node}\` is not visible because it has an effective width and height of: \`${width} x ${height}\` pixels.`
   }
 
   const transformResult = $transform.detectVisibility($el)
@@ -544,7 +544,7 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true }
     width = elClientWidth($parent)
     height = elClientHeight($parent)
 
-    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`overflow: hidden\` and an client width and height of: \`${width} x ${height}\` pixels.`
+    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`overflow: hidden\` and an effective width and height of: \`${width} x ${height}\` pixels.`
   }
 
   // nested else --___________--

From 2a4d5549978d57333fc6475731933695d146ad16 Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <jennifer@cypress.io>
Date: Thu, 11 Apr 2024 15:31:37 -0400
Subject: [PATCH 10/47] fix changelog

---
 cli/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index d78f90702ced..1195f213cd04 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -5,7 +5,7 @@ _Released 4/16/2024 (PENDING)_
 
 **Bugfixes:**
 
-- Fixed an issue where Cypress not detect visible elements with width or height in rem as visible [#29172](https://github.com/cypress-io/cypress/issues/29093). Fixed in [#29224](https://github.com/cypress-io/cypress/pull/29224).
+- Fixed an issue where Cypress did not detect visible elements with width or height in rem as visible. Fixes [#29224](https://github.com/cypress-io/cypress/issues/29093) and [#28638](https://github.com/cypress-io/cypress/issues/28638).
 
 ## 13.7.3
 

From 347ca9e220b945bb7761f8f4137124cb4c1a51b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Fri, 12 Apr 2024 08:43:29 +0200
Subject: [PATCH 11/47] fix for test that catched not correct span

---
 packages/driver/cypress/e2e/dom/visibility.cy.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index 5dc7495afc30..2144c3f6aaa8 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -258,7 +258,7 @@ describe('src/cypress/dom/visibility', () => {
 
       this.$parentNoWidthHeightOverflowAuto = add(`\
 <div style='width: 0; height: 0px; overflow: auto;'>
-  <span>parent no size, overflow: auto</span>
+  <span id='parentNoWidthAndHeight' >parent no size, overflow: auto</span>
 </div>`)
 
       this.$parentWithWidthHeightNoOverflow = add(`\
@@ -733,8 +733,8 @@ describe('src/cypress/dom/visibility', () => {
       })
 
       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
+        expect(this.$parentNoWidth.find('#parentNoWidth')).to.be.hidden
+        expect(this.$parentNoWidth.find('#parentNoWidth')).to.not.be.visible
       })
 
       it('is hidden if parent has overflow: hidden and no height', function () {

From 5d57f92a2e761732182f456b46b50d9a736d6607 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Sun, 14 Apr 2024 22:18:02 +0200
Subject: [PATCH 12/47] fix for visibility compatible backward

---
 packages/driver/src/dom/visibility.ts | 58 ++++++++++++++++-----------
 1 file changed, 34 insertions(+), 24 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 45e2f86248cb..a651b692ee19 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -133,8 +133,8 @@ const elHasNoEffectiveWidthOrHeight = ($el) => {
   const el = $el[0]
   const style = getComputedStyle(el)
   const transform = style.getPropertyValue('transform')
-  const width = elClientWidth($el)
-  const height = elClientHeight($el)
+  const width = elOffsetWidth($el)
+  const height = elOffsetHeight($el)
   const overflowHidden = elHasOverflowHidden($el)
 
   return isZeroLengthAndTransformNone(width, height, transform) ||
@@ -157,16 +157,24 @@ const isZeroLengthAndOverflowHidden = (width, height, overflowHidden) => {
     (height <= 0 && overflowHidden)
 }
 
+const elHasNoClientWidthOrHeight = ($el) => {
+  return (elClientWidth($el) <= 0) || (elClientHeight($el) <= 0)
+}
+
+const elOffsetWidth = ($el) => {
+  return $el[0].offsetWidth
+}
+
 const elClientWidth = ($el) => {
   return $el[0].getBoundingClientRect().width
 }
 
-const elClientHeight = ($el) => {
-  return $el[0].getBoundingClientRect().height
+const elOffsetHeight = ($el) => {
+  return $el[0].offsetHeight
 }
 
-const elHasNoClientWidthOrHeight = ($el) => {
-  return (elClientWidth($el) <= 0) || (elClientHeight($el) <= 0)
+const elClientHeight = ($el) => {
+  return $el[0].getBoundingClientRect().height
 }
 
 const elHasVisibilityHiddenOrCollapse = ($el) => {
@@ -185,6 +193,10 @@ const elHasOpacityZero = ($el) => {
   return $el.css('opacity') === '0'
 }
 
+const elHasBlockStyle = ($el) => {
+  return $el.css('display') === 'block' || $el.css('display') === 'inline-block'
+}
+
 const elHasDisplayNone = ($el) => {
   return $el.css('display') === 'none'
 }
@@ -327,30 +339,28 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent(
   }
 
   if (canClipContent($el, $ancestor)) {
-    if ($el[0] instanceof DOMRect && $ancestor[0] instanceof DOMRect) {
-      const elProp = $el.getBoundingClientRect()
-      const ancestorProp = $ancestor[0].getBoundingClientRect()
+    const el: HTMLElement = $jquery.isJquery($el) ? $el[0] : $el
+    const elProps = el.getBoundingClientRect()
+    const ancestorProps = $jquery.isJquery($ancestor) ? $ancestor[0].getBoundingClientRect() : $ancestor.get(0).getBoundingClientRect()
 
-      if (elHasPositionAbsolute($el) && (ancestorProp.width === 0 || ancestorProp.height === 0)) {
-        return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
-      }
+    if ((elHasPositionAbsolute($el) || elHasBlockStyle($el)) && (ancestorProps.width === 0 || ancestorProps.height === 0)) {
+      return elIsOutOfBoundsOfAncestorsOverflow(el, getParent($ancestor))
+    }
 
-      // target el is out of bounds
-      if (
-        // target el is to the right of the ancestor's visible area
-        (elProp.left >= (ancestorProp.width + ancestorProp.left)) ||
+    if (
+    // target el is to the right of the ancestor's visible area
+      (elProps.left < 0) || (elProps.left >= (ancestorProps.width + ancestorProps.left)) ||
 
         // target el is to the left of the ancestor's visible area
-        ((elProp.left + elProp.width) <= ancestorProp.left) ||
+        ((elProps.left + elProps.width) <= ancestorProps.left) ||
 
         // target el is under the ancestor's visible area
-        (elProp.top >= (ancestorProp.height + ancestorProp.top)) ||
+        (elProps.top >= (ancestorProps.height + ancestorProps.top)) ||
 
         // target el is above the ancestor's visible area
-        ((elProp.top + elProp.height) <= ancestorProp.top)
-      ) {
-        return true
-      }
+        ((elProps.top + elProps.height) <= ancestorProps.top)
+    ) {
+      return true
     }
   }
 
@@ -541,8 +551,8 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true }
 
   if ($parent = parentHasNoOffsetWidthOrHeightAndOverflowHidden(getParent($el))) {
     parentNode = stringifyElement($parent, 'short')
-    width = elClientWidth($parent)
-    height = elClientHeight($parent)
+    width = elOffsetWidth($parent)
+    height = elOffsetHeight($parent)
 
     return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`overflow: hidden\` and an effective width and height of: \`${width} x ${height}\` pixels.`
   }

From 4ad813619107dfe97d8427d4964289f7c3c09919 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Sun, 14 Apr 2024 22:28:22 +0200
Subject: [PATCH 13/47] tests pass without this check so probably not needed

---
 packages/driver/src/dom/visibility.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index a651b692ee19..1b4f6095e344 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -349,7 +349,7 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent(
 
     if (
     // target el is to the right of the ancestor's visible area
-      (elProps.left < 0) || (elProps.left >= (ancestorProps.width + ancestorProps.left)) ||
+      (elProps.left >= (ancestorProps.width + ancestorProps.left)) ||
 
         // target el is to the left of the ancestor's visible area
         ((elProps.left + elProps.width) <= ancestorProps.left) ||

From f484c50ccec43d628953be078a12ae9a72bd3403 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Sun, 14 Apr 2024 22:31:17 +0200
Subject: [PATCH 14/47] only cleanup to take less on screen and be more visible

---
 packages/driver/src/dom/visibility.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 1b4f6095e344..1464f4284d8c 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -348,17 +348,17 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent(
     }
 
     if (
-    // target el is to the right of the ancestor's visible area
+      // target el is to the right of the ancestor's visible area
       (elProps.left >= (ancestorProps.width + ancestorProps.left)) ||
 
-        // target el is to the left of the ancestor's visible area
-        ((elProps.left + elProps.width) <= ancestorProps.left) ||
+      // target el is to the left of the ancestor's visible area
+      ((elProps.left + elProps.width) <= ancestorProps.left) ||
 
-        // target el is under the ancestor's visible area
-        (elProps.top >= (ancestorProps.height + ancestorProps.top)) ||
+      // target el is under the ancestor's visible area
+      (elProps.top >= (ancestorProps.height + ancestorProps.top)) ||
 
-        // target el is above the ancestor's visible area
-        ((elProps.top + elProps.height) <= ancestorProps.top)
+      // target el is above the ancestor's visible area
+      ((elProps.top + elProps.height) <= ancestorProps.top)
     ) {
       return true
     }

From 0fcc3ea3fc03b7e2d360f3b08536feedeb2fe62f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Sun, 14 Apr 2024 23:08:16 +0200
Subject: [PATCH 15/47] fix for 28638

---
 packages/driver/src/dom/visibility.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 1464f4284d8c..9e1a6f603fa4 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -338,6 +338,11 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent(
     return false
   }
 
+  //fix for 28638
+  if (elHasPositionRelative($el) && elHasPositionAbsolute($ancestor)) {
+    return false
+  }
+
   if (canClipContent($el, $ancestor)) {
     const el: HTMLElement = $jquery.isJquery($el) ? $el[0] : $el
     const elProps = el.getBoundingClientRect()

From 2d85cb39150ce77120c971df6e7be66ea53fd6b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 17 Apr 2024 09:09:12 +0200
Subject: [PATCH 16/47] adding id to make easier to find searched element

---
 packages/driver/cypress/e2e/dom/visibility.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index 2144c3f6aaa8..e0d757f54034 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -247,7 +247,7 @@ describe('src/cypress/dom/visibility', () => {
       this.$parentNoWidth = add(`\
 <div style='width: 0; height: 100px; overflow: hidden;'>
   <div style='height: 500px; width: 500px;'>
-    <span>parent width: 0</span>
+    <span id='parentNoWidth' >parent width: 0</span>
   </div>
 </div>`)
 

From 2842d5e577f687300420c45bd25b719290bc2303 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 17 Apr 2024 11:17:34 +0200
Subject: [PATCH 17/47] visibility tests pass

---
 packages/driver/src/dom/visibility.ts | 61 ++++++++++++++-------------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 9e1a6f603fa4..c4e684bc9260 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -133,13 +133,13 @@ const elHasNoEffectiveWidthOrHeight = ($el) => {
   const el = $el[0]
   const style = getComputedStyle(el)
   const transform = style.getPropertyValue('transform')
-  const width = elOffsetWidth($el)
-  const height = elOffsetHeight($el)
+  const width = elClientWidth($el)
+  const height = elClientHeight($el)
   const overflowHidden = elHasOverflowHidden($el)
 
   return isZeroLengthAndTransformNone(width, height, transform) ||
-    isZeroLengthAndOverflowHidden(width, height, overflowHidden) ||
-    (el.getClientRects().length <= 0)
+  isZeroLengthAndOverflowHidden(width, height, overflowHidden) ||
+  (el.getClientRects().length <= 0)
 }
 
 const isZeroLengthAndTransformNone = (width, height, transform) => {
@@ -149,33 +149,33 @@ const isZeroLengthAndTransformNone = (width, height, transform) => {
   // That's why we're checking `transform === 'none'` together with elOffsetWidth/Height.
 
   return (width <= 0 && transform === 'none') ||
-    (height <= 0 && transform === 'none')
+  (height <= 0 && transform === 'none')
 }
 
 const isZeroLengthAndOverflowHidden = (width, height, overflowHidden) => {
   return (width <= 0 && overflowHidden) ||
-    (height <= 0 && overflowHidden)
+  (height <= 0 && overflowHidden)
 }
 
 const elHasNoClientWidthOrHeight = ($el) => {
   return (elClientWidth($el) <= 0) || (elClientHeight($el) <= 0)
 }
 
-const elOffsetWidth = ($el) => {
-  return $el[0].offsetWidth
+const elClientHeight = ($el) => {
+  return $el[0].getBoundingClientRect().height
 }
 
 const elClientWidth = ($el) => {
   return $el[0].getBoundingClientRect().width
 }
 
-const elOffsetHeight = ($el) => {
-  return $el[0].offsetHeight
-}
+// const elOffsetWidth = ($el) => {
+//   return $el[0].offsetWidth
+// }
 
-const elClientHeight = ($el) => {
-  return $el[0].getBoundingClientRect().height
-}
+// const elOffsetHeight = ($el) => {
+//   return $el[0].offsetHeight
+// }
 
 const elHasVisibilityHiddenOrCollapse = ($el) => {
   return elHasVisibilityHidden($el) || elHasVisibilityCollapse($el)
@@ -208,13 +208,13 @@ const elHasDisplayInline = ($el) => {
 const elHasOverflowHidden = function ($el: JQuery<HTMLElement>) {
   let styles = getComputedStyle($el[0])
 
-  if (styles.getPropertyValue('grid')) { //we ignore hidden when grid used
-    return false
-  }
+  // if (styles.getPropertyValue('visibility')==='visible') { //we ignore hidden when el visible
+  //   return false
+  // }
 
   if (styles.getPropertyValue('overflow') === 'hidden'
-    || styles.getPropertyValue('overflow-y') === 'hidden'
-    || styles.getPropertyValue('overflow-x') === 'hidden') {
+      || styles.getPropertyValue('overflow-y') === 'hidden'
+      || styles.getPropertyValue('overflow-x') === 'hidden') {
     return true
   }
 
@@ -231,8 +231,8 @@ const elHasPositionAbsolute = ($el) => {
 
 const elHasClippableOverflow = function ($el) {
   return OVERFLOW_PROPS.includes($el.css('overflow')) ||
-    OVERFLOW_PROPS.includes($el.css('overflow-y')) ||
-    OVERFLOW_PROPS.includes($el.css('overflow-x'))
+          OVERFLOW_PROPS.includes($el.css('overflow-y')) ||
+            OVERFLOW_PROPS.includes($el.css('overflow-x'))
 }
 
 const canClipContent = function ($el, $ancestor) {
@@ -352,6 +352,7 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent(
       return elIsOutOfBoundsOfAncestorsOverflow(el, getParent($ancestor))
     }
 
+    // target el is out of bounds
     if (
       // target el is to the right of the ancestor's visible area
       (elProps.left >= (ancestorProps.width + ancestorProps.left)) ||
@@ -407,7 +408,7 @@ const elIsHiddenByAncestors = function ($el, checkOpacity, $origEl = $el) {
   return elIsHiddenByAncestors($parent, checkOpacity, $origEl)
 }
 
-const parentHasNoOffsetWidthOrHeightAndOverflowHidden = function ($el) {
+const parentHasNoClientWidthOrHeightAndOverflowHidden = function ($el) {
   // if we've walked all the way up to body or html then return false
   if (isUndefinedOrHTMLBodyDoc($el)) {
     return false
@@ -419,7 +420,7 @@ const parentHasNoOffsetWidthOrHeightAndOverflowHidden = function ($el) {
   }
 
   // continue walking
-  return parentHasNoOffsetWidthOrHeightAndOverflowHidden(getParent($el))
+  return parentHasNoClientWidthOrHeightAndOverflowHidden(getParent($el))
 }
 
 const parentHasDisplayNone = function ($el) {
@@ -540,24 +541,24 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true }
     return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`opacity: 0\``
   }
 
-  if (elHasNoClientWidthOrHeight($el)) {
-    return `This element \`${node}\` is not visible because it has an effective width and height of: \`${width} x ${height}\` pixels.`
-  }
-
   const transformResult = $transform.detectVisibility($el)
 
   if (transformResult === 'transformed') {
     return `This element \`${node}\` is not visible because it is hidden by transform.`
   }
 
+  if (elHasNoClientWidthOrHeight($el)) {
+    return `This element \`${node}\` is not visible because it has an effective width and height of: \`${width} x ${height}\` pixels.`
+  }
+
   if (transformResult === 'backface') {
     return `This element \`${node}\` is not visible because it is rotated and its backface is hidden.`
   }
 
-  if ($parent = parentHasNoOffsetWidthOrHeightAndOverflowHidden(getParent($el))) {
+  if ($parent = parentHasNoClientWidthOrHeightAndOverflowHidden(getParent($el))) {
     parentNode = stringifyElement($parent, 'short')
-    width = elOffsetWidth($parent)
-    height = elOffsetHeight($parent)
+    width = elClientWidth($parent)
+    height = elClientHeight($parent)
 
     return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`overflow: hidden\` and an effective width and height of: \`${width} x ${height}\` pixels.`
   }

From 1d7d9abe70fc83a4961772dcd5270181601f8d67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 17 Apr 2024 12:20:59 +0200
Subject: [PATCH 18/47] final fix for 29093

---
 packages/driver/src/dom/visibility.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index c4e684bc9260..cc0326fba2d8 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -181,6 +181,10 @@ const elHasVisibilityHiddenOrCollapse = ($el) => {
   return elHasVisibilityHidden($el) || elHasVisibilityCollapse($el)
 }
 
+const elHasVisibilityVisible = ($el) => {
+  return $el.css('visibility') === 'visible'
+}
+
 const elHasVisibilityHidden = ($el) => {
   return $el.css('visibility') === 'hidden'
 }
@@ -208,10 +212,6 @@ const elHasDisplayInline = ($el) => {
 const elHasOverflowHidden = function ($el: JQuery<HTMLElement>) {
   let styles = getComputedStyle($el[0])
 
-  // if (styles.getPropertyValue('visibility')==='visible') { //we ignore hidden when el visible
-  //   return false
-  // }
-
   if (styles.getPropertyValue('overflow') === 'hidden'
       || styles.getPropertyValue('overflow-y') === 'hidden'
       || styles.getPropertyValue('overflow-x') === 'hidden') {
@@ -404,6 +404,10 @@ const elIsHiddenByAncestors = function ($el, checkOpacity, $origEl = $el) {
     return !elDescendentsHavePositionFixedOrAbsolute($parent, $origEl)
   }
 
+  if (elHasVisibilityVisible($parent)) {
+    return false
+  }
+
   // continue to recursively walk up the chain until we reach body or html
   return elIsHiddenByAncestors($parent, checkOpacity, $origEl)
 }

From 023646b7c813172cf74d65dee0a159aa1fd549c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 17 Apr 2024 12:26:24 +0200
Subject: [PATCH 19/47] general cleanup and comments update

---
 packages/driver/src/dom/visibility.ts | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index cc0326fba2d8..f71209117999 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -65,7 +65,7 @@ const isStrictlyHidden = (el, methodName = 'isStrictlyHidden()', options = { che
   }
 
   // in Cypress-land we consider the element hidden if
-  // either its offsetHeight or offsetWidth is 0 because
+  // either its clientHeight or clientWidth is 0 because
   // it is impossible for the user to interact with this element
   if (elHasNoEffectiveWidthOrHeight($el)) {
     // https://github.com/cypress-io/cypress/issues/6183
@@ -121,7 +121,7 @@ const elHasNoEffectiveWidthOrHeight = ($el) => {
   // Is the element's CSS width OR height, including any borders,
   // padding, and vertical scrollbars (if rendered) less than 0?
   //
-  // elOffsetWidth:
+  // elClientWidth:
   // If the element is hidden (for example, by setting style.display
   // on the element or one of its ancestors to "none"), then 0 is returned.
 
@@ -146,7 +146,7 @@ const isZeroLengthAndTransformNone = (width, height, transform) => {
   // From https://github.com/cypress-io/cypress/issues/5974,
   // we learned that when an element has non-'none' transform style value like "translate(0, 0)",
   // it is visible even with `height: 0` or `width: 0`.
-  // That's why we're checking `transform === 'none'` together with elOffsetWidth/Height.
+  // That's why we're checking `transform === 'none'` together with elClientWidth/Height.
 
   return (width <= 0 && transform === 'none') ||
   (height <= 0 && transform === 'none')
@@ -169,14 +169,6 @@ const elClientWidth = ($el) => {
   return $el[0].getBoundingClientRect().width
 }
 
-// const elOffsetWidth = ($el) => {
-//   return $el[0].offsetWidth
-// }
-
-// const elOffsetHeight = ($el) => {
-//   return $el[0].offsetHeight
-// }
-
 const elHasVisibilityHiddenOrCollapse = ($el) => {
   return elHasVisibilityHidden($el) || elHasVisibilityCollapse($el)
 }
@@ -376,7 +368,7 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent(
 const elIsHiddenByAncestors = function ($el, checkOpacity, $origEl = $el) {
   // walk up to each parent until we reach the body
   // if any parent has opacity: 0
-  // or has an effective offsetHeight of 0
+  // or has an effective clientHeight of 0
   // and its set overflow: hidden then our child element
   // is effectively hidden
   // -----UNLESS------

From 61749d761793fabe5f33b7f52bdad1c61ee989b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Fri, 19 Apr 2024 08:36:46 +0200
Subject: [PATCH 20/47] not using jquery for this check

---
 packages/driver/src/dom/visibility.ts | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index f71209117999..43d41618af36 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -201,16 +201,10 @@ const elHasDisplayInline = ($el) => {
   return $el.css('display') === 'inline'
 }
 
-const elHasOverflowHidden = function ($el: JQuery<HTMLElement>) {
-  let styles = getComputedStyle($el[0])
+const elHasOverflowHidden = function ($el) {
+  const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
 
-  if (styles.getPropertyValue('overflow') === 'hidden'
-      || styles.getPropertyValue('overflow-y') === 'hidden'
-      || styles.getPropertyValue('overflow-x') === 'hidden') {
-    return true
-  }
-
-  return false
+  return cssOverflow.includes('hidden')
 }
 
 const elHasPositionRelative = ($el) => {

From ec3f9ab2fbab0f410e69310d9b234c9f87d4e92e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Fri, 19 Apr 2024 09:08:21 +0200
Subject: [PATCH 21/47] another potential speed improvement

---
 packages/driver/src/dom/visibility.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 43d41618af36..415aff6d64d4 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -330,14 +330,15 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent(
   }
 
   if (canClipContent($el, $ancestor)) {
-    const el: HTMLElement = $jquery.isJquery($el) ? $el[0] : $el
-    const elProps = el.getBoundingClientRect()
-    const ancestorProps = $jquery.isJquery($ancestor) ? $ancestor[0].getBoundingClientRect() : $ancestor.get(0).getBoundingClientRect()
+    const ancestorProps = $ancestor.get(0).getBoundingClientRect()
 
     if ((elHasPositionAbsolute($el) || elHasBlockStyle($el)) && (ancestorProps.width === 0 || ancestorProps.height === 0)) {
-      return elIsOutOfBoundsOfAncestorsOverflow(el, getParent($ancestor))
+      return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
     }
 
+    const el: HTMLElement = $jquery.isJquery($el) ? $el[0] : $el
+    const elProps = el.getBoundingClientRect()
+
     // target el is out of bounds
     if (
       // target el is to the right of the ancestor's visible area

From 5ac6fe521a7e1b4d7231d4fcd0a4e254b726e2fd Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <shehane.jennifer@gmail.com>
Date: Fri, 19 Apr 2024 10:32:29 -0400
Subject: [PATCH 22/47] Update cli/CHANGELOG.md

---
 cli/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index a582e23108f0..865bbe9c4d8f 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,7 +1,7 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
 ## 13.8.1
 
-_Released 4/23/2024_
+_Released 4/23/2024 (PENDING)_
 
 **Bugfixes:**
 

From ad39a629b77abc68f9c95cd52e8588992702052b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Sat, 20 Apr 2024 13:36:22 +0200
Subject: [PATCH 23/47] speed improvements for ci

---
 packages/driver/src/dom/visibility.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 415aff6d64d4..a82a6cbbee63 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -129,16 +129,22 @@ const elHasNoEffectiveWidthOrHeight = ($el) => {
   // For HTML <area> elements, SVG elements that do not render anything themselves,
   // display:none elements, and generally any elements that are not directly rendered,
   // an empty list is returned.
-
   const el = $el[0]
-  const style = getComputedStyle(el)
-  const transform = style.getPropertyValue('transform')
+  let transform
+
+  if ($el[0].style.transform) {
+    const style = getComputedStyle(el)
+
+    transform = style.getPropertyValue('transform')
+  } else {
+    transform = 'none'
+  }
+
   const width = elClientWidth($el)
   const height = elClientHeight($el)
-  const overflowHidden = elHasOverflowHidden($el)
 
   return isZeroLengthAndTransformNone(width, height, transform) ||
-  isZeroLengthAndOverflowHidden(width, height, overflowHidden) ||
+  isZeroLengthAndOverflowHidden(width, height, elHasOverflowHidden($el)) ||
   (el.getClientRects().length <= 0)
 }
 

From 606ca756eb9faffc50259257595acb4d64b07e4b Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <jennifer@cypress.io>
Date: Thu, 25 Apr 2024 10:19:47 -0400
Subject: [PATCH 24/47] Update changelog entry

---
 cli/CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 73c37fa9c613..e8891933d827 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,4 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 13.8.2
+
+_Released 5/7/2024_
+
+**Bugfixes:**
+
+- Fixed an issue where Cypress did not detect visible elements with width or height in rem as visible. Fixes [#29224](https://github.com/cypress-io/cypress/issues/29093) and [#28638](https://github.com/cypress-io/cypress/issues/28638).
+
 ## 13.8.1
 
 _Released 4/23/2024_

From 7aac0f92a6280d28c91439aca18e4660747a9577 Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <jennifer@cypress.io>
Date: Thu, 25 Apr 2024 10:26:25 -0400
Subject: [PATCH 25/47] add pending to changelog

---
 cli/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index e8891933d827..d3a7045a69a9 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,7 +1,7 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
 ## 13.8.2
 
-_Released 5/7/2024_
+_Released 5/7/2024 (PENDING)_
 
 **Bugfixes:**
 

From 35022fcf51f5ea518c1b417b99f52570b7ce6f76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 7 May 2024 09:36:46 +0200
Subject: [PATCH 26/47] filerow test fix

---
 packages/launchpad/src/components/code/FileRow.cy.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/launchpad/src/components/code/FileRow.cy.tsx b/packages/launchpad/src/components/code/FileRow.cy.tsx
index 660cb11180f6..8640adff41d4 100644
--- a/packages/launchpad/src/components/code/FileRow.cy.tsx
+++ b/packages/launchpad/src/components/code/FileRow.cy.tsx
@@ -117,10 +117,10 @@ describe('FileRow', () => {
     cy.contains(changesRequiredDescription).should('be.visible')
     cy.get('pre').should('have.length', 2)
 
-    cy.get('.shiki').should('be.visible')
+    cy.get('div.rounded > div.text-left.cursor-text').should('be.visible')
     cy.contains('cypress/integration/command.js').click()
 
-    cy.get('.shiki').should('not.be.visible')
+    cy.get('div.rounded > div.text-left.cursor-text').should('not.exist')
   })
 
   it('responds nice to small screens', { viewportWidth: 500 }, () => {

From f3b4081332176e6347acb07e93eb2ff89e90651c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 7 May 2024 10:17:33 +0200
Subject: [PATCH 27/47] make width and haight visible in fleaky test

---
 packages/driver/cypress/e2e/dom/visibility.cy.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index e0d757f54034..3502418f8eb6 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -833,6 +833,8 @@ describe('src/cypress/dom/visibility', () => {
       })
 
       it('is hidden when parent overflow hidden and out of bounds above', function () {
+        cy.log(`Wiewport width ${ Cypress.config('viewportWidth').toString()}`)
+        cy.log(`Viewport height ${ Cypress.config('viewportHeight').toString()}`)
         expect(this.$elOutOfParentBoundsAbove.find('span')).to.be.hidden
       })
 

From fc85dd5318076fdd7b227ad7794f0599e32f44d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 8 May 2024 07:52:04 +0200
Subject: [PATCH 28/47] mocha added to launchpad package

---
 packages/launchpad/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/launchpad/package.json b/packages/launchpad/package.json
index cdb3974a40c4..98998b0323f9 100644
--- a/packages/launchpad/package.json
+++ b/packages/launchpad/package.json
@@ -57,6 +57,7 @@
     "gravatar": "1.8.0",
     "javascript-time-ago": "2.3.8",
     "markdown-it": "13.0.1",
+    "mocha": "10.4.0",
     "rollup-plugin-polyfill-node": "^0.7.0",
     "type-fest": "^2.3.4",
     "unplugin-vue-components": "0.24.1",

From 8e49f910119e3add65c3e0f186a45af043dd5822 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 8 May 2024 10:15:51 +0200
Subject: [PATCH 29/47] Update CHANGELOG.md

make it pipeline ok
---
 cli/CHANGELOG.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 99a531b26318..fa964eea1573 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,4 +1,8 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+_Released xx/xx/xxxx (PENDING)_
+
+- Fixed an issue where Cypress did not detect visible elements with width or height in rem as visible. Fixes [#29224](https://github.com/cypress-io/cypress/issues/29093) and [#28638](https://github.com/cypress-io/cypress/issues/28638).
+- 
 ## 13.9.0
 
 _Released 5/7/2024_
@@ -9,7 +13,6 @@ _Released 5/7/2024_
 
 **Bugfixes:**
 
-- Fixed an issue where Cypress did not detect visible elements with width or height in rem as visible. Fixes [#29224](https://github.com/cypress-io/cypress/issues/29093) and [#28638](https://github.com/cypress-io/cypress/issues/28638).
 - Fixed a bug where promises rejected with `undefined` were failing inside `cy.origin()`. Addresses [#23937](https://github.com/cypress-io/cypress/issues/23937).
 - We now pass the same default Chromium flags to Electron as we do to Chrome. As a result of this change, the application under test's `navigator.webdriver` property will now correctly be `true` when testing in Electron. Fixes [#27939](https://github.com/cypress-io/cypress/issues/27939).
 - Fixed network issues in requests using fetch for users where Cypress is run behind a proxy that performs HTTPS decryption (common among corporate proxies). Fixes [#29171](https://github.com/cypress-io/cypress/issues/29171).

From 07b50b509bcd730cee568f4dffb14cb20ed863b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 8 May 2024 10:17:50 +0200
Subject: [PATCH 30/47] Update CHANGELOG.md

pipeline
---
 cli/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index fa964eea1573..070c3997238d 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,6 +1,10 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 13.9.1
+
 _Released xx/xx/xxxx (PENDING)_
 
+**Bugfixes:**
+
 - Fixed an issue where Cypress did not detect visible elements with width or height in rem as visible. Fixes [#29224](https://github.com/cypress-io/cypress/issues/29093) and [#28638](https://github.com/cypress-io/cypress/issues/28638).
 - 
 ## 13.9.0

From 0ada6971e0b18b6193d13f6df60b0e03f61559a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 8 May 2024 10:20:33 +0200
Subject: [PATCH 31/47] Update CHANGELOG.md


From 85dbb8a4b08b919419789258990234b91e0af101 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 8 May 2024 10:22:31 +0200
Subject: [PATCH 32/47] Update CHANGELOG.md

---
 cli/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 070c3997238d..4e89d05dbd0d 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,7 +1,7 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
 ## 13.9.1
 
-_Released xx/xx/xxxx (PENDING)_
+_Released 5/14/2024 (PENDING)_
 
 **Bugfixes:**
 

From f94e28e4106e74fdb099266617e1f06d8dc287bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Thu, 9 May 2024 10:37:56 +0200
Subject: [PATCH 33/47] make pipeline view visible

---
 packages/driver/cypress/e2e/dom/visibility.cy.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index 3502418f8eb6..fa465cc7f49a 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -833,9 +833,7 @@ describe('src/cypress/dom/visibility', () => {
       })
 
       it('is hidden when parent overflow hidden and out of bounds above', function () {
-        cy.log(`Wiewport width ${ Cypress.config('viewportWidth').toString()}`)
-        cy.log(`Viewport height ${ Cypress.config('viewportHeight').toString()}`)
-        expect(this.$elOutOfParentBoundsAbove.find('span')).to.be.hidden
+        expect(this.$elOutOfParentBoundsAbove.find('span'), `expected '<span>' to be 'hidden' when Wiewport width ${ Cypress.config('viewportWidth').toString()} Viewport height ${ Cypress.config('viewportHeight').toString()}`).to.be.hidden
       })
 
       it('is hidden when parent overflow hidden and out of bounds below', function () {

From 47dfcf2d95d05ddce6699bafe8284d561968b040 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Thu, 9 May 2024 11:32:01 +0200
Subject: [PATCH 34/47] out of bound fix

---
 packages/driver/src/dom/visibility.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index a82a6cbbee63..525d0e42a394 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -348,13 +348,13 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent(
     // target el is out of bounds
     if (
       // target el is to the right of the ancestor's visible area
-      (elProps.left >= (ancestorProps.width + ancestorProps.left)) ||
+      elProps.left < 0 || (elProps.left >= (ancestorProps.width + ancestorProps.left)) ||
 
       // target el is to the left of the ancestor's visible area
       ((elProps.left + elProps.width) <= ancestorProps.left) ||
 
       // target el is under the ancestor's visible area
-      (elProps.top >= (ancestorProps.height + ancestorProps.top)) ||
+      elProps.top < 0 || (elProps.top >= (ancestorProps.height + ancestorProps.top)) ||
 
       // target el is above the ancestor's visible area
       ((elProps.top + elProps.height) <= ancestorProps.top)

From 461e6e755d4b126afc8899e0328a49881e247654 Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <jennifer@cypress.io>
Date: Fri, 10 May 2024 10:50:02 -0400
Subject: [PATCH 35/47] Remove old changelog entry

---
 cli/CHANGELOG.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 1bbfd808593b..c1d32c3843e8 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -18,7 +18,6 @@ _Released 5/7/2024_
 
 **Bugfixes:**
 
-
 - Fixed a bug where promises rejected with `undefined` were failing inside `cy.origin()`. Addresses [#23937](https://github.com/cypress-io/cypress/issues/23937).
 - We now pass the same default Chromium flags to Electron as we do to Chrome. As a result of this change, the application under test's `navigator.webdriver` property will now correctly be `true` when testing in Electron. Fixes [#27939](https://github.com/cypress-io/cypress/issues/27939).
 - Fixed network issues in requests using fetch for users where Cypress is run behind a proxy that performs HTTPS decryption (common among corporate proxies). Fixes [#29171](https://github.com/cypress-io/cypress/issues/29171).
@@ -43,7 +42,6 @@ _Released 4/23/2024_
 **Bugfixes:**
 
 - Fixed a regression introduced in [`13.6.0`](https://docs.cypress.io/guides/references/changelog#13-6-0) where Cypress would occasionally exit with status code 1, even when a test run was successfully, due to an unhandled WebSocket exception (`Error: WebSocket connection closed`). Addresses [#28523](https://github.com/cypress-io/cypress/issues/28523).
-- Fixed an issue where Cypress did not detect visible elements with width or height in rem as visible. Fixes [#29224](https://github.com/cypress-io/cypress/issues/29093) and [#28638](https://github.com/cypress-io/cypress/issues/28638).
 - Fixed an issue where Cypress would hang on some commands when an invalid `timeout` option was provided. Fixes [#29323](https://github.com/cypress-io/cypress/issues/29323).
 
 **Misc:**

From 46f51055a9a8a1a39af366f8d6f21de866113b3a Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <jennifer@cypress.io>
Date: Fri, 10 May 2024 10:50:38 -0400
Subject: [PATCH 36/47] another changelog fix

---
 cli/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index c1d32c3843e8..b30df18b963c 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -41,7 +41,7 @@ _Released 4/23/2024_
 
 **Bugfixes:**
 
-- Fixed a regression introduced in [`13.6.0`](https://docs.cypress.io/guides/references/changelog#13-6-0) where Cypress would occasionally exit with status code 1, even when a test run was successfully, due to an unhandled WebSocket exception (`Error: WebSocket connection closed`). Addresses [#28523](https://github.com/cypress-io/cypress/issues/28523).
+- Fixed a regression introduced in [`13.6.0`](https://docs.cypress.io/guides/references/changelog#13-6-0) where Cypress would occasionally exit with status code 1, even when a test run was successful, due to an unhandled WebSocket exception (`Error: WebSocket connection closed`). Addresses [#28523](https://github.com/cypress-io/cypress/issues/28523).
 - Fixed an issue where Cypress would hang on some commands when an invalid `timeout` option was provided. Fixes [#29323](https://github.com/cypress-io/cypress/issues/29323).
 
 **Misc:**

From c670a8edba25737cf3f40b498549c82d6f1ddac3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Mon, 13 May 2024 09:51:00 +0200
Subject: [PATCH 37/47] fix  for existing test

---
 packages/driver/src/dom/visibility.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 525d0e42a394..f204394779ab 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -354,7 +354,7 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent(
       ((elProps.left + elProps.width) <= ancestorProps.left) ||
 
       // target el is under the ancestor's visible area
-      elProps.top < 0 || (elProps.top >= (ancestorProps.height + ancestorProps.top)) ||
+      (elProps.top >= (ancestorProps.height + ancestorProps.top)) ||
 
       // target el is above the ancestor's visible area
       ((elProps.top + elProps.height) <= ancestorProps.top)

From 0d0d984b9059a14c2b6a175a073769dea802faa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Mon, 13 May 2024 10:40:52 +0200
Subject: [PATCH 38/47] kitchensink fix

---
 packages/driver/src/dom/visibility.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index f204394779ab..dd55dd798a5a 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -348,13 +348,13 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent(
     // target el is out of bounds
     if (
       // target el is to the right of the ancestor's visible area
-      elProps.left < 0 || (elProps.left >= (ancestorProps.width + ancestorProps.left)) ||
+      (elProps.left >= (ancestorProps.width + ancestorProps.left)) ||
 
       // target el is to the left of the ancestor's visible area
       ((elProps.left + elProps.width) <= ancestorProps.left) ||
 
       // target el is under the ancestor's visible area
-      (elProps.top >= (ancestorProps.height + ancestorProps.top)) ||
+      elProps.top < 0 || (elProps.top >= (ancestorProps.height + ancestorProps.top)) ||
 
       // target el is above the ancestor's visible area
       ((elProps.top + elProps.height) <= ancestorProps.top)

From eb598ee836574e2c65894c8ed2a31faaf30a1c6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Mon, 13 May 2024 13:10:18 +0200
Subject: [PATCH 39/47] go back to previously working

---
 packages/driver/src/dom/visibility.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index dd55dd798a5a..a82a6cbbee63 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -354,7 +354,7 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent(
       ((elProps.left + elProps.width) <= ancestorProps.left) ||
 
       // target el is under the ancestor's visible area
-      elProps.top < 0 || (elProps.top >= (ancestorProps.height + ancestorProps.top)) ||
+      (elProps.top >= (ancestorProps.height + ancestorProps.top)) ||
 
       // target el is above the ancestor's visible area
       ((elProps.top + elProps.height) <= ancestorProps.top)

From 7082a6b93ddc21e76c2fb73939e73d8a6e7661ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Mon, 13 May 2024 15:12:52 +0200
Subject: [PATCH 40/47] pipeline speed improvement

---
 packages/driver/src/dom/visibility.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index a82a6cbbee63..3ba79221dc10 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -114,7 +114,7 @@ const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options =
 
   // else check if el is outside the bounds
   // of its ancestors overflow
-  return elIsOutOfBoundsOfAncestorsOverflow($el)
+  return elIsOutOfBoundsOfAncestorsOverflow($el, el)
 }
 
 const elHasNoEffectiveWidthOrHeight = ($el) => {
@@ -322,7 +322,7 @@ const elIsNotElementFromPoint = function ($el) {
   return true
 }
 
-const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent($el)) {
+const elIsOutOfBoundsOfAncestorsOverflow = function ($el, el: HTMLElement, $ancestor = getParent($el)) {
   // no ancestor, not out of bounds!
   // if we've reached the top parent, which is not a normal DOM el
   // then we're in bounds all the way up, return false
@@ -339,10 +339,10 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent(
     const ancestorProps = $ancestor.get(0).getBoundingClientRect()
 
     if ((elHasPositionAbsolute($el) || elHasBlockStyle($el)) && (ancestorProps.width === 0 || ancestorProps.height === 0)) {
-      return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
+      return elIsOutOfBoundsOfAncestorsOverflow($el, el, getParent($ancestor))
     }
 
-    const el: HTMLElement = $jquery.isJquery($el) ? $el[0] : $el
+    // const el: HTMLElement = $jquery.isJquery($el) ? $el[0] : $el
     const elProps = el.getBoundingClientRect()
 
     // target el is out of bounds
@@ -363,7 +363,7 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent(
     }
   }
 
-  return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
+  return elIsOutOfBoundsOfAncestorsOverflow($el, el, getParent($ancestor))
 }
 
 const elIsHiddenByAncestors = function ($el, checkOpacity, $origEl = $el) {
@@ -573,7 +573,9 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true }
       return `This element \`${node}\` 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()\`?`
     }
   } else {
-    if (elIsOutOfBoundsOfAncestorsOverflow($el)) {
+    const el: HTMLElement = $jquery.isJquery($el) ? $el[0] : $el
+
+    if (elIsOutOfBoundsOfAncestorsOverflow($el, el)) {
       return `This element \`${node}\` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: \`hidden\`, \`scroll\` or \`auto\``
     }
   }

From 093c8e0bcb70f939ba9005171a8ba7712a76d40f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 22 May 2024 09:57:08 +0200
Subject: [PATCH 41/47] id for precise locator gind

---
 packages/driver/cypress/e2e/dom/visibility.cy.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index fa465cc7f49a..aea2d95ff509 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -368,7 +368,7 @@ describe('src/cypress/dom/visibility', () => {
 
       this.$elOutOfParentBoundsAbove = add(`\
 <div style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
-  <span style='position: absolute; width: 100px; height: 100px; left: 0px; top: -100px;'>position: absolute, out of bounds above</span>
+  <span id='outOfParentBoundsAbove' style='position: absolute; width: 100px; height: 100px; left: 0px; top: -100px;'>position: absolute, out of bounds above</span>
 </div>\
 `)
 
@@ -833,7 +833,7 @@ describe('src/cypress/dom/visibility', () => {
       })
 
       it('is hidden when parent overflow hidden and out of bounds above', function () {
-        expect(this.$elOutOfParentBoundsAbove.find('span'), `expected '<span>' to be 'hidden' when Wiewport width ${ Cypress.config('viewportWidth').toString()} Viewport height ${ Cypress.config('viewportHeight').toString()}`).to.be.hidden
+        expect(this.$elOutOfParentBoundsAbove.find('#outOfParentBoundsAbove'), `expected '<span>' to be 'hidden'`).to.be.hidden
       })
 
       it('is hidden when parent overflow hidden and out of bounds below', function () {

From 3862c48bce557e2beedd2cb5ef9fa650e8dfb6e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 4 Jun 2024 09:15:47 +0200
Subject: [PATCH 42/47] removed unussed id

---
 packages/driver/cypress/e2e/dom/visibility.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index aea2d95ff509..d3a50418671b 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -258,7 +258,7 @@ describe('src/cypress/dom/visibility', () => {
 
       this.$parentNoWidthHeightOverflowAuto = add(`\
 <div style='width: 0; height: 0px; overflow: auto;'>
-  <span id='parentNoWidthAndHeight' >parent no size, overflow: auto</span>
+  <span>parent no size, overflow: auto</span>
 </div>`)
 
       this.$parentWithWidthHeightNoOverflow = add(`\

From bf76534797c5060239a91b163819129de19d427b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 4 Jun 2024 10:33:29 +0200
Subject: [PATCH 43/47] display contents fix

---
 packages/driver/src/dom/visibility.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 3ba79221dc10..4ce45a1138a6 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -195,14 +195,14 @@ const elHasOpacityZero = ($el) => {
   return $el.css('opacity') === '0'
 }
 
-const elHasBlockStyle = ($el) => {
-  return $el.css('display') === 'block' || $el.css('display') === 'inline-block'
-}
-
 const elHasDisplayNone = ($el) => {
   return $el.css('display') === 'none'
 }
 
+const elHasDisplayContents = ($el) => {
+  return $el.css('display') === 'contents'
+}
+
 const elHasDisplayInline = ($el) => {
   return $el.css('display') === 'inline'
 }
@@ -330,6 +330,11 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, el: HTMLElement, $ance
     return false
   }
 
+  //fix for 29093
+  if (elHasDisplayContents($ancestor)) {
+    return false
+  }
+
   //fix for 28638
   if (elHasPositionRelative($el) && elHasPositionAbsolute($ancestor)) {
     return false
@@ -338,7 +343,7 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, el: HTMLElement, $ance
   if (canClipContent($el, $ancestor)) {
     const ancestorProps = $ancestor.get(0).getBoundingClientRect()
 
-    if ((elHasPositionAbsolute($el) || elHasBlockStyle($el)) && (ancestorProps.width === 0 || ancestorProps.height === 0)) {
+    if (elHasPositionAbsolute($el) && (ancestorProps.width === 0 || ancestorProps.height === 0)) {
       return elIsOutOfBoundsOfAncestorsOverflow($el, el, getParent($ancestor))
     }
 

From bcea9bd6fbcd3a62e7de725fe850a874c87ecd0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 4 Jun 2024 11:01:58 +0200
Subject: [PATCH 44/47] additional tests

---
 packages/driver/cypress/e2e/dom/visibility.cy.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index d3a50418671b..e2c352430973 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -251,6 +251,13 @@ describe('src/cypress/dom/visibility', () => {
   </div>
 </div>`)
 
+      this.$parentOfDivNoWidth = add(`\
+<div style='width: 0; height: 100px; overflow: hidden;'>
+  <div style='height: 500px; width: 500px;'>
+    <div id='parentOfDivNoWidth' >parent width: 0</div>
+  </div>
+</div>`)
+
       this.$parentNoHeight = add(`\
 <div style='width: 100px; height: 0px; overflow: hidden;'>
   <span>parent height: 0</span>
@@ -737,6 +744,11 @@ describe('src/cypress/dom/visibility', () => {
         expect(this.$parentNoWidth.find('#parentNoWidth')).to.not.be.visible
       })
 
+      it('is hidden if parent has overflow: hidden and no width', function () {
+        expect(this.$parentOfDivNoWidth.find('#parentOfDivNoWidth')).to.be.hidden
+        expect(this.$parentOfDivNoWidth.find('#parentOfDivNoWidth')).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

From cad469da3582c16d4f7a01d3ec20e1542c8fa0be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 4 Jun 2024 11:04:43 +0200
Subject: [PATCH 45/47] move to correct place in canClip

---
 packages/driver/src/dom/visibility.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 4ce45a1138a6..d4a420fa0a14 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -233,6 +233,11 @@ const canClipContent = function ($el, $ancestor) {
     return false
   }
 
+  //fix for 29093
+  if (elHasDisplayContents($ancestor)) {
+    return false
+  }
+
   // the closest parent with position relative, absolute, or fixed
   const $offsetParent = $el.offsetParent()
 
@@ -330,11 +335,6 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, el: HTMLElement, $ance
     return false
   }
 
-  //fix for 29093
-  if (elHasDisplayContents($ancestor)) {
-    return false
-  }
-
   //fix for 28638
   if (elHasPositionRelative($el) && elHasPositionAbsolute($ancestor)) {
     return false

From 58f2e9d5fc4fd2ebdb245ea3a54465e0d2767635 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 4 Jun 2024 12:06:20 +0200
Subject: [PATCH 46/47] 28638 in correct place

---
 packages/driver/src/dom/visibility.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index d4a420fa0a14..05c332c923e9 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -233,18 +233,24 @@ const canClipContent = function ($el, $ancestor) {
     return false
   }
 
-  //fix for 29093
+  // fix for 29093
   if (elHasDisplayContents($ancestor)) {
     return false
   }
 
   // the closest parent with position relative, absolute, or fixed
   const $offsetParent = $el.offsetParent()
+  const isClosestAncsestor = isAncestor($ancestor, $offsetParent)
+
+  // fix for 28638 - when element postion is relative and it's parent absolute
+  if (elHasPositionRelative($el) && isClosestAncsestor && elHasPositionAbsolute($ancestor)) {
+    return false
+  }
 
   // even if ancestors' overflow is clippable, if the element's offset parent
   // is a parent of the ancestor, the ancestor will not clip the element
   // unless the element is position relative
-  if (!elHasPositionRelative($el) && isAncestor($ancestor, $offsetParent)) {
+  if (!elHasPositionRelative($el) && isClosestAncsestor) {
     return false
   }
 
@@ -335,7 +341,6 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, el: HTMLElement, $ance
     return false
   }
 
-  //fix for 28638
   if (elHasPositionRelative($el) && elHasPositionAbsolute($ancestor)) {
     return false
   }

From 7cf025a4021ae6e969eabd111e903354d4c4b823 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 4 Jun 2024 12:49:37 +0200
Subject: [PATCH 47/47] readability and performance improvements

---
 packages/driver/src/dom/visibility.ts | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 05c332c923e9..bcc1e541bfa5 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -114,7 +114,7 @@ const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options =
 
   // else check if el is outside the bounds
   // of its ancestors overflow
-  return elIsOutOfBoundsOfAncestorsOverflow($el, el)
+  return elIsOutOfBoundsOfAncestorsOverflow($el)
 }
 
 const elHasNoEffectiveWidthOrHeight = ($el) => {
@@ -167,12 +167,14 @@ const elHasNoClientWidthOrHeight = ($el) => {
   return (elClientWidth($el) <= 0) || (elClientHeight($el) <= 0)
 }
 
+const elementBoundingRect = ($el) => $el[0].getBoundingClientRect()
+
 const elClientHeight = ($el) => {
-  return $el[0].getBoundingClientRect().height
+  return elementBoundingRect($el).height
 }
 
 const elClientWidth = ($el) => {
-  return $el[0].getBoundingClientRect().width
+  return elementBoundingRect($el).width
 }
 
 const elHasVisibilityHiddenOrCollapse = ($el) => {
@@ -333,7 +335,7 @@ const elIsNotElementFromPoint = function ($el) {
   return true
 }
 
-const elIsOutOfBoundsOfAncestorsOverflow = function ($el, el: HTMLElement, $ancestor = getParent($el)) {
+const elIsOutOfBoundsOfAncestorsOverflow = function ($el: JQuery<any>, $ancestor = getParent($el)) {
   // no ancestor, not out of bounds!
   // if we've reached the top parent, which is not a normal DOM el
   // then we're in bounds all the way up, return false
@@ -349,11 +351,10 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, el: HTMLElement, $ance
     const ancestorProps = $ancestor.get(0).getBoundingClientRect()
 
     if (elHasPositionAbsolute($el) && (ancestorProps.width === 0 || ancestorProps.height === 0)) {
-      return elIsOutOfBoundsOfAncestorsOverflow($el, el, getParent($ancestor))
+      return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
     }
 
-    // const el: HTMLElement = $jquery.isJquery($el) ? $el[0] : $el
-    const elProps = el.getBoundingClientRect()
+    const elProps = $el.get(0).getBoundingClientRect()
 
     // target el is out of bounds
     if (
@@ -373,7 +374,7 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, el: HTMLElement, $ance
     }
   }
 
-  return elIsOutOfBoundsOfAncestorsOverflow($el, el, getParent($ancestor))
+  return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
 }
 
 const elIsHiddenByAncestors = function ($el, checkOpacity, $origEl = $el) {
@@ -583,9 +584,7 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true }
       return `This element \`${node}\` 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()\`?`
     }
   } else {
-    const el: HTMLElement = $jquery.isJquery($el) ? $el[0] : $el
-
-    if (elIsOutOfBoundsOfAncestorsOverflow($el, el)) {
+    if (elIsOutOfBoundsOfAncestorsOverflow($el)) {
       return `This element \`${node}\` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: \`hidden\`, \`scroll\` or \`auto\``
     }
   }