Fix transform + overflow error.

packages/driver/src/dom/visibility.js

@@ -97,18 +97,31 @@ const elHasNoEffectiveWidthOrHeight = ($el) => {
   // 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')
+  const width = elOffsetWidth($el)
+  const height = elOffsetHeight($el)
+  const overflowHidden = elHasOverflowHidden($el)
+
+  return isZeroLengthAndTransformNone(width, height, transform) ||
+  isZeroLengthAndOverflowHidden(width, height, overflowHidden) ||
+  (el.getClientRects().length <= 0)
+}
+
+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.
 
-  const el = $el[0]
-  const style = getComputedStyle(el)
-  const transform = style.getPropertyValue('transform')
+  return (width <= 0 && transform === 'none') ||
+  (height <= 0 && transform === 'none')
+}
 
-  return (elOffsetWidth($el) <= 0 && transform === 'none') ||
-  (elOffsetHeight($el) <= 0 && transform === 'none') ||
-  ($el[0].getClientRects().length <= 0)
+const isZeroLengthAndOverflowHidden = (width, height, overflowHidden) => {
+  return (width <= 0 && overflowHidden) ||
+  (height <= 0 && overflowHidden)
 }
 
 const elHasNoOffsetWidthOrHeight = ($el) => {

packages/driver/test/cypress/integration/dom/visibility_spec.js

@@ -920,6 +920,44 @@ describe('src/cypress/dom/visibility', () => {
 
           expect(el.find('#tr-p-2')).to.be.hidden
         })
+
+        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
+          })
+
+          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('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('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('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('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 when outside parents transform scale', function () {