cypress-io · mschile · Dec 2, 2024 · Jun 17, 2024 · Jun 17, 2024 · Jun 17, 2024
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -13,6 +13,7 @@ _Released 6/18/2024 (PENDING)_
 - Fixed an issue where `inlineSourceMaps` was still being used when `sourceMaps` was provided in a users typescript config for typescript version 5. Fixes [#26203](https://github.com/cypress-io/cypress/issues/26203).
 - When capture protocol script fails verification, an appropriate error is now displayed. Previously, an error regarding Test Replay archive location was shown. Addressed in [#29603](https://github.com/cypress-io/cypress/pull/29603).
 - Fixed an issue where receiving HTTP responses with invalid headers raised an error. Now cypress removes the invalid headers and gives a warning in the console with debug mode on. Fixes [#28865](https://github.com/cypress-io/cypress/issues/28865).
+- Fixed an issue where parent width signal element hidden when it's visible [#29687](https://github.com/cypress-io/cypress/issues/29687).
 
 **Misc:** 
 

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -174,7 +174,7 @@ describe('src/cypress/dom/visibility', () => {
       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;">width: 0</div>')
+      this.$divNoWidth = add('<div id="divNoWidth" style="width: 0; height: 100px;">width: 0</div>')
       this.$divNoHeight = add('<div style="width: 50px; height: 0px;">height: 0</div>')
       this.$divDetached = $('<div>foo</div>')
       this.$divVisible = add(`<div>visible</div>`)
@@ -721,15 +721,15 @@ describe('src/cypress/dom/visibility', () => {
     })
 
     describe('width and height', () => {
-      it('is hidden if offsetWidth is 0', function () {
-        expect(this.$divNoWidth.is(':hidden')).to.be.true
-        expect(this.$divNoWidth.is(':visible')).to.be.false
+      it('is visible even if offsetWidth is 0', function () {
+        expect(this.$divNoWidth.is(':hidden')).to.be.false
+        expect(this.$divNoWidth.is(':visible')).to.be.true
 
-        expect(this.$divNoWidth).to.be.hidden
-        expect(this.$divNoWidth).to.not.be.visible
+        expect(this.$divNoWidth).to.not.be.hidden
+        expect(this.$divNoWidth).to.be.visible
 
-        cy.wrap(this.$divNoWidth).should('be.hidden')
-        cy.wrap(this.$divNoWidth).should('not.be.visible')
+        cy.wrap(this.$divNoWidth).should('be.not.hidden')
+        cy.wrap(this.$divNoWidth).should('be.visible')
       })
 
       it('is hidden if parent has overflow: hidden and no width', function () {
@@ -1142,7 +1142,7 @@ describe('src/cypress/dom/visibility', () => {
       })
 
       it('has effective zero width', function () {
-        this.reasonIs(this.$divNoWidth, 'This element `<div>` is not visible because it has an effective width and height of: `0 x 100` pixels.')
+        this.reasonIs(this.$divNoWidth, 'This element `<div#divNoWidth>` is not visible because it has an effective width and height of: `0 x 100` pixels.')
       })
 
       it('has effective zero height', function () {

diff --git a/packages/driver/cypress/e2e/issues/29687.cy.js b/packages/driver/cypress/e2e/issues/29687.cy.js
@@ -0,0 +1,12 @@
+describe('issue visible element with parent 0 width are detected as not visible', () => {
+  before(() => {
+    cy
+    .viewport('macbook-16')
+    .visit('/fixtures/issue-29687.html')
+  })
+
+  it('can click element when effective 0 width parent used', () => {
+    expect(cy.$$('#id2 >div > p')).to.be.visible
+    cy.get('#id2 >div > p').click()
+  })
+})
diff --git a/packages/driver/cypress/fixtures/issue-29687.html b/packages/driver/cypress/fixtures/issue-29687.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>zero width repro</title>
+  <style id="compiled-css" type="text/css">
+    .big {
+      font-size: 128px;
+    }
+  </style>
+</head>
+
+<body>  
+  <div id="id2">
+    <div style="width: 0">
+      <p class="big">IN SECTION 2 </p>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
@@ -117,7 +117,7 @@ const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options =
   return elIsOutOfBoundsOfAncestorsOverflow($el)
 }
 
-const elHasNoEffectiveWidthOrHeight = ($el) => {
+const elHasNoEffectiveWidthOrHeight = ($el, parent = false) => {
   // Is the element's CSS width OR height, including any borders,
   // padding, and vertical scrollbars (if rendered) less than 0?
   //
@@ -137,7 +137,8 @@ const elHasNoEffectiveWidthOrHeight = ($el) => {
   const height = elOffsetHeight($el)
   const overflowHidden = elHasOverflowHidden($el)
 
-  return isZeroLengthAndTransformNone(width, height, transform) ||
+  return ((parent ? elOffsetWidth($el) <= 0 : false)
+  && isZeroLengthAndTransformNone(width, height, transform)) ||
   isZeroLengthAndOverflowHidden(width, height, overflowHidden) ||
   (el.getClientRects().length <= 0)
 }
@@ -370,7 +371,7 @@ const elIsHiddenByAncestors = function ($el, checkOpacity, $origEl = $el) {
     return true
   }
 
-  if (elHasOverflowHidden($parent) && elHasNoEffectiveWidthOrHeight($parent)) {
+  if (elHasOverflowHidden($parent) && elHasNoEffectiveWidthOrHeight($parent, true)) {
     // if any of the elements between the parent and origEl
     // have fixed or position absolute
     return !elDescendentsHavePositionFixedOrAbsolute($parent, $origEl)