cypress-io · mschile · Dec 2, 2024 · Jul 1, 2024 · Jul 1, 2024 · Jul 1, 2024
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -15,6 +15,7 @@ _Released 7/02/2024 (PENDING)_
 
 - Fixed an issue where Chrome launch instances would not recreate the browser CRI client correctly after recovering from an unexpected browser closure. Fixes [#27657](https://github.com/cypress-io/cypress/issues/27657). Fixed in [#29663](https://github.com/cypress-io/cypress/pull/29663).
 - Fixed an issue where Firefox 129 (Firefox Nightly) would not launch with Cypress. Fixes [#29713](https://github.com/cypress-io/cypress/issues/29713). Fixed in [#29720](https://github.com/cypress-io/cypress/pull/29720).
+- Fixed an issue where overflow: clip in parent html node make child node visibility not correctly detected. Fixes [#23852](https://github.com/cypress-io/cypress/issues/23852). Fixed in [#29778](https://github.com/cypress-io/cypress/pull/29778).
 
 **Dependency Updates:**
 

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -1150,7 +1150,7 @@ describe('src/cypress/dom/visibility', () => {
       })
 
       it('has a parent with an effective zero width and overflow: hidden', function () {
-        this.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.')
+        this.reasonIs(this.$parentNoHeight.find('span'), 'This element `<span>` is not visible because its parent `<div>` has CSS property: `overflow: hidden` or `overflow: clip` and an effective width and height of: `100 x 0` pixels.')
       })
 
       it('element sits outside boundaries of parent with overflow clipping', function () {

diff --git a/packages/driver/cypress/e2e/issues/23852.cy.js b/packages/driver/cypress/e2e/issues/23852.cy.js
@@ -0,0 +1,12 @@
+// https://github.com/cypress-io/cypress/issues/23852
+describe('issue visible element with parent 0 width are detected as not visible', () => {
+  before(() => {
+    cy
+    .viewport('macbook-16')
+    .visit('/fixtures/issue-23852.html')
+  })
+
+  it('can click element when effective 0 width parent used', () => {
+    expect(cy.$$('#hidden')).to.not.be.visible
+  })
+})
diff --git a/packages/driver/cypress/fixtures/issue-23852.html b/packages/driver/cypress/fixtures/issue-23852.html
@@ -0,0 +1,4 @@
+<body>
+  <div id="root"><div style="max-height: 0px; overflow: clip;"><div id="hidden">I am not visible</div></div></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
@@ -9,7 +9,7 @@ const { isElement, isBody, isHTML, isOption, isOptgroup, getParent, getFirstPare
 
 const fixedOrAbsoluteRe = /(fixed|absolute)/
 
-const OVERFLOW_PROPS = ['hidden', 'scroll', 'auto']
+const OVERFLOW_PROPS = ['hidden', 'scroll', 'auto', 'clip']
 
 const isVisible = (el) => {
   return !isHidden(el, 'isVisible()')
@@ -193,6 +193,12 @@ const elHasDisplayInline = ($el) => {
   return $el.css('display') === 'inline'
 }
 
+const elHasOverflowClip = function ($el) {
+  const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
+
+  return cssOverflow.includes('clip')
+}
+
 const elHasOverflowHidden = function ($el) {
   const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
 
@@ -370,7 +376,8 @@ const elIsHiddenByAncestors = function ($el, checkOpacity, $origEl = $el) {
     return true
   }
 
-  if (elHasOverflowHidden($parent) && elHasNoEffectiveWidthOrHeight($parent)) {
+  if ((elHasOverflowHidden($parent) || elHasOverflowClip($parent))
+     && elHasNoEffectiveWidthOrHeight($parent)) {
     // if any of the elements between the parent and origEl
     // have fixed or position absolute
     return !elDescendentsHavePositionFixedOrAbsolute($parent, $origEl)
@@ -386,8 +393,8 @@ const parentHasNoOffsetWidthOrHeightAndOverflowHidden = function ($el) {
     return false
   }
 
-  // if we have overflow hidden and no effective width or height
-  if (elHasOverflowHidden($el) && elHasNoEffectiveWidthOrHeight($el)) {
+  // if we have overflow hidden or clip and no effective width or height
+  if ((elHasOverflowHidden($el) || elHasOverflowClip($el)) && elHasNoEffectiveWidthOrHeight($el)) {
     return $el
   }
 
@@ -532,7 +539,7 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true }
     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.`
+    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`overflow: hidden\` or \`overflow: clip\` and an effective width and height of: \`${width} x ${height}\` pixels.`
   }
 
   // nested else --___________--