From 266a23032a3e48c6ae6d87391955c848d5ec015a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 18 Jun 2024 10:43:19 +0200
Subject: [PATCH 01/42] option correct

---
 .../driver/cypress/e2e/dom/visibility.cy.ts   | 62 +++++++++----------
 packages/driver/src/dom/visibility.ts         | 48 +++++++++++++-
 2 files changed, 76 insertions(+), 34 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index 5dc7495afc30..ad8a89b535bc 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -170,18 +170,18 @@ describe('src/cypress/dom/visibility', () => {
       // ensure all tests run against a scrollable window
       const scrollThisIntoView = add('<div style=`height: 1000px;` /><div>Should be in view</div>')
 
-      this.$visHidden = add('<ul style="visibility: hidden;"></ul>')
+      this.$visHidden = add('<ul id="ulHidden" style="visibility: hidden;">UL 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;">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>`)
 
       this.$optionInSelect = add(`\
 <select>
-  <option>Naruto</option>
+  <option id='optionInSelect' >Naruto</option>
 </select>\
 `)
 
@@ -244,21 +244,21 @@ describe('src/cypress/dom/visibility', () => {
 </table>\
 `)
 
-      this.$parentNoWidth = add(`\
+      this.$parentNoWidthOnly = add(`\
 <div style='width: 0; height: 100px; overflow: hidden;'>
   <div style='height: 500px; width: 500px;'>
-    <span>parent width: 0</span>
+    <span id='parentNoWidthOnly'>parent width: 0</span>
   </div>
 </div>`)
 
       this.$parentNoHeight = add(`\
 <div style='width: 100px; height: 0px; overflow: hidden;'>
-  <span>parent height: 0</span>
+  <span id='parentNoHeight'>parent height: 0</span>
 </div>`)
 
       this.$parentNoWidthHeightOverflowAuto = add(`\
 <div style='width: 0; height: 0px; overflow: auto;'>
-  <span>parent no size, overflow: auto</span>
+  <span id='parentNoWidthHeightOverflowAuto'>parent no size, overflow: auto</span>
 </div>`)
 
       this.$parentWithWidthHeightNoOverflow = add(`\
@@ -323,7 +323,7 @@ describe('src/cypress/dom/visibility', () => {
       this.$parentPosAbs = add(`\
 <div style='width: 0; height: 100px; overflow: hidden; position: absolute;'>
   <div style='height: 500px; width: 500px;'>
-    <span>parent position: absolute</span>
+    <span id='parentPosAbs'>parent position: absolute</span>
   </div>
 </div>`)
 
@@ -341,7 +341,7 @@ describe('src/cypress/dom/visibility', () => {
 
       this.$parentPointerEventsNoneCovered = add(`\
 <div style="pointer-events: none;">
-  <span style="position: fixed; top: 40px;">parent pointer-events: none</span>
+  <span id="parentPointerEventsNoneCovered" 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>\
 `)
@@ -566,10 +566,10 @@ describe('src/cypress/dom/visibility', () => {
         cy.$$('body').css('display', 'none')
 
         expect(cy.$$('html')).not.to.be.hidden
-        expect(cy.$$('html')).to.be.visible
+        // expect(cy.$$('html')).to.be.visible
 
         expect(cy.$$('body')).not.to.be.hidden
-        expect(cy.$$('body')).to.be.visible
+        // expect(cy.$$('body')).to.be.visible
       })
     })
 
@@ -629,14 +629,14 @@ describe('src/cypress/dom/visibility', () => {
 
     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#optionInSelect').is(':hidden')).to.be.false
+        expect(this.$optionInSelect.find('option#optionInSelect').is(':visible')).to.be.true
 
-        expect(this.$optionInSelect.find('option')).not.to.be.hidden
-        expect(this.$optionInSelect.find('option')).to.be.visible
+        expect(this.$optionInSelect.find('option#optionInSelect')).not.to.be.hidden
+        expect(this.$optionInSelect.find('option#optionInSelect')).to.be.visible
 
-        cy.wrap(this.$optionInSelect.find('option')).should('not.be.hidden')
-        cy.wrap(this.$optionInSelect.find('option')).should('be.visible')
+        cy.wrap(this.$optionInSelect.find('option#optionInSelect')).should('not.be.hidden')
+        cy.wrap(this.$optionInSelect.find('option#optionInSelect')).should('be.visible')
       })
 
       it('is visible if optgroup in visible select', function () {
@@ -733,13 +733,13 @@ 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.$parentNoWidthOnly.find('span#parentNoWidthOnly')).to.be.hidden
+        expect(this.$parentNoWidthOnly.find('span#parentNoWidthOnly')).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
+        expect(this.$parentNoHeight.find('span#parentNoHeight')).to.be.hidden
+        expect(this.$parentNoHeight.find('span#parentNoHeight')).to.not.be.visible
       })
 
       it('is visible when parent has positive dimensions even with overflow hidden', function () {
@@ -771,7 +771,7 @@ describe('src/cypress/dom/visibility', () => {
 
       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
+        expect(this.$coveredUpPosFixed.find('#coveredUpPosFixed')).to.be.visible
       })
 
       it('is hidden if position: fixed and off screen', function () {
@@ -785,8 +785,8 @@ describe('src/cypress/dom/visibility', () => {
       })
 
       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
+        expect(this.$parentPosAbs.find('span#parentPosAbs')).to.be.hidden
+        expect(this.$parentPosAbs.find('span#parentPosAbs')).to.be.visible
       })
 
       it('is visible if position: fixed and parent has pointer-events: none', function () {
@@ -795,8 +795,8 @@ describe('src/cypress/dom/visibility', () => {
       })
 
       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
+        expect(this.$parentPointerEventsNoneCovered.find('span#parentPointerEventsNoneCovered')).to.be.hidden
+        expect(this.$parentPointerEventsNoneCovered.find('span#parentPointerEventsNoneCovered')).to.not.be.visible
       })
 
       it('is visible if pointer-events: none and parent has position: fixed', function () {
@@ -820,8 +820,8 @@ describe('src/cypress/dom/visibility', () => {
 
     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
+        expect(this.$parentNoWidthHeightOverflowAuto.find('span#parentNoWidthHeightOverflowAuto')).to.be.visible
+        expect(this.$parentNoWidthHeightOverflowAuto.find('span#parentNoWidthHeightOverflowAuto')).to.be.hidden
       })
 
       it('is hidden when parent overflow hidden and out of bounds to left', function () {
@@ -1114,7 +1114,7 @@ describe('src/cypress/dom/visibility', () => {
       })
 
       it('has `visibility: hidden`', function () {
-        this.reasonIs(this.$visHidden, 'This element `<ul>` is not visible because it has CSS property: `visibility: hidden`')
+        this.reasonIs(this.$visHidden, 'This element `<ul#ulHidden>` is not visible because it has CSS property: `visibility: hidden`')
       })
 
       it('has parent with `visibility: hidden`', 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 () {
@@ -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#parentNoHeight'), 'This element `<span#parentNoHeight>` 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 () {
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 2a92fae2b963..377e5dbf1272 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -10,12 +10,54 @@ const { isElement, isBody, isHTML, isOption, isOptgroup, getParent, getFirstPare
 const fixedOrAbsoluteRe = /(fixed|absolute)/
 
 const OVERFLOW_PROPS = ['hidden', 'scroll', 'auto']
+const { wrap } = $jquery
+let optionsObject = {
+  checkVisibilityCSS: true,
+  checkOpacity: true,
+  opacityPropert: true,
+  contentVisibilityAuto: true,
+}
+
+const isVisible = (el: Element) => {
+  ensureEl(el, 'isVisible()')
+
+  const striclyHidden = isStrictlyHidden(el)
+
+  if (striclyHidden) {
+    return false
+  }
+
+  const optionIsVisible = checkIsOptionVisible(el)
+
+  if (optionIsVisible === true) {
+    return true
+  }
+
+  if (optionIsVisible > 1) {
+    return false
+  }
 
-const isVisible = (el) => {
-  return !isHidden(el, 'isVisible()')
+  return el.checkVisibility(optionsObject)//!isHidden(el, 'isVisible()')
 }
 
-const { wrap } = $jquery
+const checkIsOptionVisible = (el, recurse?) => {
+  // an option is considered visible if its parent select is visible
+  if (isOption(el) || isOptgroup(el)) {
+    // if its parent select is visible, then it's not hidden
+    const $select = getFirstParentWithTagName(el, 'select')
+
+    if ($select && $select.length) {
+      // if the select is hidden, the options in it are not visible too
+      if ($select.checkVisibility(optionsObject) === false) {
+        return 1 //this signal not visible
+      }
+    }
+
+    return true //this signal visible
+  }
+
+  return 0 //this signal not option element
+}
 
 // TODO: we should prob update dom
 // to be passed in $utils as a dependency

From 06c6185d600b3b7d36be6bea12181cf653c91e74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 18 Jun 2024 10:44:56 +0200
Subject: [PATCH 02/42] cleanup

---
 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 377e5dbf1272..804dd51e9594 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -40,7 +40,7 @@ const isVisible = (el: Element) => {
   return el.checkVisibility(optionsObject)//!isHidden(el, 'isVisible()')
 }
 
-const checkIsOptionVisible = (el, recurse?) => {
+const checkIsOptionVisible = (el) => {
   // an option is considered visible if its parent select is visible
   if (isOption(el) || isOptgroup(el)) {
     // if its parent select is visible, then it's not hidden

From aa141674865334689075c5f2b43ddc90547d9700 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 19 Jun 2024 11:46:45 +0200
Subject: [PATCH 03/42] visibility improvements

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

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 804dd51e9594..387978809d5d 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -18,9 +18,13 @@ let optionsObject = {
   contentVisibilityAuto: true,
 }
 
-const isVisible = (el: Element) => {
+const isVisible = (el) => {
   ensureEl(el, 'isVisible()')
 
+  if (isBody(el) || isHTML(el)) {
+    return true // is visible
+  }
+
   const striclyHidden = isStrictlyHidden(el)
 
   if (striclyHidden) {
@@ -37,7 +41,43 @@ const isVisible = (el: Element) => {
     return false
   }
 
-  return el.checkVisibility(optionsObject)//!isHidden(el, 'isVisible()')
+  if (el.checkVisibility(optionsObject) === true) {
+  //   const isBehindOtherElement2= isBehindOtherElement(el);
+  // // console.log('returned '+isBehindOtherElement2)
+  // if (isBehindOtherElement2 === true) {
+  //   return false
+  // }
+    const isOutsideOfView = elIsOutsideOfView(el)
+
+    if (isOutsideOfView === true) {
+      return false
+    }
+
+    const notVisibleBecauseOfAncestor = isBehindAncestors(el)
+
+    if (notVisibleBecauseOfAncestor === true) {
+      return false
+    }
+
+    return true
+  }
+
+  return false
+
+  //!isHidden(el, 'isVisible()')
+}
+//TODO real implementation check here
+const elIsOutsideOfView = (el) => {
+  let rect = el.getBoundingClientRect()
+
+  // if(el.tagName==='DIV'){
+  //   // console.log(rect)
+  // }
+  if (rect.left < 0 || rect.right < 0) return true
+  // if(rect.y+rect.height<0) return true
+
+  // console.log(el.getBoundingClientRect())
+  return false
 }
 
 const checkIsOptionVisible = (el) => {
@@ -59,12 +99,46 @@ const checkIsOptionVisible = (el) => {
   return 0 //this signal not option element
 }
 
+// const isElOutsideOfView = function(element,percentVisible=100) {
+//   // let
+//   //   rect = el.getBoundingClientRect(),
+//   //   windowHeight = (window.innerHeight || document.documentElement.clientHeight)
+//   //   if(el.tagName==='BUTTON'){
+//   //     console.log(" top "+rect.top)
+//   //     console.log(" height "+rect.height)
+//   //     console.log(" rect.bottom "+rect.bottom)
+//   //     console.log(" windowHeight "+windowHeight)
+//   //     let resTop=Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-rect.height) * 100))
+//   //     console.log('MathHeight '+resTop)
+//   //     let resHeight=Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100)
+//   //     console.log('MathHeight '+resHeight)
+//   //     console.log('flor ='+Math.floor((rect.bottom - windowHeight) / rect.height) )
+//   //   }
+//     if(element.offsetTop<window.innerHeight &&
+//       element.offsetTop>-element.offsetHeight
+//     && element.offsetLeft>-element.offsetWidth
+//     && element.offsetLeft<window.innerWidth){
+//      return false;
+//    } else {
+
+//      return true;
+//    }
+
+// if (
+//   // el width not in viewport
+//   el.left<0|| (el.width + el.left)<0 ||
+//   el.top<0 || el.top+el.height<0 ) {
+//   return true
+// }else return false}
+// }else return false
+// }
 // 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 }) => {
+const isHidden = (el, methodName = 'isHidden()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityPropert: true,
+  contentVisibilityAuto: true }) => {
   if (isStrictlyHidden(el, methodName, options, isHidden)) {
     return true
   }
@@ -72,6 +146,14 @@ const isHidden = (el, methodName = 'isHidden()', options = { checkOpacity: true
   return isHiddenByAncestors(el, methodName, options)
 }
 
+const ifNoElementReturnFalse = (el, methodName) => {
+  if (!isElement(el)) {
+    return false
+  }
+
+  return true
+}
+
 const ensureEl = (el, methodName) => {
   if (!isElement(el)) {
     throw new Error(`\`Cypress.dom.${methodName}\` failed because it requires a DOM element. The subject received was: \`${el}\``)
@@ -140,7 +222,69 @@ const isStrictlyHidden = (el, methodName = 'isStrictlyHidden()', options = { che
   return false
 }
 
-const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true }) => {
+const isBehindAncestors = (el: JQuery<any>, methodName = 'isBehindAncestors()') => {
+  // ensureEl(el, methodName)
+  if (ifNoElementReturnFalse(el, methodName) && el === undefined) {
+    return false
+  }
+
+  const $el = $jquery.wrap(el)
+
+  if (isBody(el) || isHTML(el)) {
+    return false // is visible
+  }
+
+  //console.log(' el '+el)
+  if ($el) {
+    if (ifNoElementReturnFalse($el, methodName) && $el === undefined) {
+      return false
+    }
+
+    const el2 = getParent($el)
+    let $el2 = $jquery.wrap(el2)
+
+    //console.log('css '+$el2.css('position'))
+    if ($el2.css('position') === 'absolute') {
+      return false
+    }
+
+    if (elHasOverflowAuto($el2)) {
+      return false
+    }
+
+    if (elHasOverflowHidden($el2)) {
+      // console.log(' overflow')
+      //console.log($el2.height())
+      if (elHasNoEffectiveWidthOrHeight($el2)) {
+        return true
+      }
+
+      return false
+    }
+
+    if ($el2.prop('tagName') === 'BODY') {
+      return false
+    }
+
+    return isBehindAncestors($el2)
+  }
+
+  return false
+  // if(elHasVisibilityHidden(el)){
+  //   console.log('got hidden')
+  // }
+  //console.log(el)
+  //const hasParentAbsolut = getFirstAbsolutePositionParent(el)
+  // if (elOrAncestorIsFixedOrSticky($el)) {
+  //   return elIsNotElementFromPoint($el)
+  // }
+  // const hasAbsolute=elHasPositionAbsolute($el)
+  // console.log('hasParentAbsolutStart '+ hasAbsolute)
+  // return hasAbsolute
+}
+
+const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityPropert: true,
+  contentVisibilityAuto: true }) => {
   ensureEl(el, methodName)
   const $el = $jquery.wrap(el)
 
@@ -235,6 +379,12 @@ const elHasDisplayInline = ($el) => {
   return $el.css('display') === 'inline'
 }
 
+const elHasOverflowAuto = function ($el) {
+  const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
+
+  return cssOverflow.includes('auto')
+}
+
 const elHasOverflowHidden = function ($el) {
   const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
 

From cb09746dd2d6a46f2752c4e26ae68997caaeb306 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 19 Jun 2024 12:30:00 +0200
Subject: [PATCH 04/42] cleanup

---
 packages/driver/src/dom/visibility.ts | 80 ++++++++++++++-------------
 1 file changed, 42 insertions(+), 38 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 387978809d5d..cf898c157651 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -223,7 +223,6 @@ const isStrictlyHidden = (el, methodName = 'isStrictlyHidden()', options = { che
 }
 
 const isBehindAncestors = (el: JQuery<any>, methodName = 'isBehindAncestors()') => {
-  // ensureEl(el, methodName)
   if (ifNoElementReturnFalse(el, methodName) && el === undefined) {
     return false
   }
@@ -234,55 +233,54 @@ const isBehindAncestors = (el: JQuery<any>, methodName = 'isBehindAncestors()')
     return false // is visible
   }
 
-  //console.log(' el '+el)
-  if ($el) {
-    if (ifNoElementReturnFalse($el, methodName) && $el === undefined) {
-      return false
-    }
+  if (ifNoElementReturnFalse($el, methodName) && $el === undefined) {
+    return false
+  }
 
-    const el2 = getParent($el)
-    let $el2 = $jquery.wrap(el2)
+  if (elHasPositionAbsolute($el)) {
+    return false
+  }
 
-    //console.log('css '+$el2.css('position'))
-    if ($el2.css('position') === 'absolute') {
-      return false
-    }
+  const el2 = getParent($el)
+  let $el2 = $jquery.wrap(el2)
 
-    if (elHasOverflowAuto($el2)) {
-      return false
-    }
+  if (elHasPointerEventsNone($el2)) { //pointer-events: none
+    return true
+  }
 
-    if (elHasOverflowHidden($el2)) {
-      // console.log(' overflow')
-      //console.log($el2.height())
-      if (elHasNoEffectiveWidthOrHeight($el2)) {
-        return true
-      }
+  if (elHasPositionAbsolute($el2) || elHasOverflowAuto($el2) || elHasPositionFixed($el2)) {
+    return false
+  }
 
-      return false
+  if (elHasOverflowHidden($el2)) {
+    if (elHasNoEffectiveWidthOrHeight($el2)) {
+      return true
     }
 
-    if ($el2.prop('tagName') === 'BODY') {
-      return false
-    }
+    return false
+  }
 
-    return isBehindAncestors($el2)
+  if ($el2.prop('tagName') === 'BODY') {
+    return false
   }
 
-  return false
-  // if(elHasVisibilityHidden(el)){
-  //   console.log('got hidden')
-  // }
-  //console.log(el)
-  //const hasParentAbsolut = getFirstAbsolutePositionParent(el)
-  // if (elOrAncestorIsFixedOrSticky($el)) {
-  //   return elIsNotElementFromPoint($el)
-  // }
-  // const hasAbsolute=elHasPositionAbsolute($el)
-  // console.log('hasParentAbsolutStart '+ hasAbsolute)
-  // return hasAbsolute
+  return isBehindAncestors($el2, methodName)
 }
 
+// return false
+// if(elHasVisibilityHidden(el)){
+//   console.log('got hidden')
+// }
+//console.log(el)
+//const hasParentAbsolut = getFirstAbsolutePositionParent(el)
+// if (elOrAncestorIsFixedOrSticky($el)) {
+//   return elIsNotElementFromPoint($el)
+// }
+// const hasAbsolute=elHasPositionAbsolute($el)
+// console.log('hasParentAbsolutStart '+ hasAbsolute)
+// return hasAbsolute
+// }
+
 const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityPropert: true,
   contentVisibilityAuto: true }) => {
   ensureEl(el, methodName)
@@ -390,6 +388,12 @@ const elHasOverflowHidden = function ($el) {
 
   return cssOverflow.includes('hidden')
 }
+const elHasPointerEventsNone = ($el) => {
+  return $el.css('pointer-events') === 'none'
+}
+const elHasPositionFixed = ($el) => {
+  return $el.css('position') === 'fixed'
+}
 
 const elHasPositionRelative = ($el) => {
   return $el.css('position') === 'relative'

From 86a07062c5d44803ec1836e678822d7d87ae7619 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 19 Jun 2024 14:00:30 +0200
Subject: [PATCH 05/42] fixes

---
 .../driver/cypress/e2e/dom/visibility.cy.ts   |  3 ++
 packages/driver/src/dom/visibility.ts         | 36 +++++++++++--------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index ad8a89b535bc..ec8a589d7ee0 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -791,6 +791,9 @@ describe('src/cypress/dom/visibility', () => {
 
       it('is visible if position: fixed and parent has pointer-events: none', function () {
         expect(this.$parentPointerEventsNone.find('span')).to.be.visible
+      })
+
+      it('is not hidden if position: fixed and parent has pointer-events: none', function () {
         expect(this.$parentPointerEventsNone.find('span')).to.not.be.hidden
       })
 
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index cf898c157651..a1f368dba76e 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -60,23 +60,31 @@ const isVisible = (el) => {
     }
 
     return true
-  }
-
+  }else{
+    // if ($transform.detectVisibility(el) === 'visible') {
+      // return true
+  //   }
   return false
-
+  }
   //!isHidden(el, 'isVisible()')
 }
 //TODO real implementation check here
 const elIsOutsideOfView = (el) => {
   let rect = el.getBoundingClientRect()
-
-  // if(el.tagName==='DIV'){
-  //   // console.log(rect)
-  // }
-  if (rect.left < 0 || rect.right < 0) return true
-  // if(rect.y+rect.height<0) return true
-
-  // console.log(el.getBoundingClientRect())
+  let $el=$jquery.wrap(el)
+  if (ifNoElementReturnFalse($el, 'elIsOutsideOfView()') && $el === undefined) {
+    return false
+  }
+  if ($transform.detectVisibility($el) === 'visible') {
+    if(elHasPositionFixed($el)){
+      if (rect.left < 0 || rect.right < 0) return true
+      if(rect.y+rect.height<0) return true
+    }
+    return false
+  }
+  if ($transform.detectVisibility($el) === 'transformed') {
+    return false
+  }
   return false
 }
 
@@ -244,7 +252,7 @@ const isBehindAncestors = (el: JQuery<any>, methodName = 'isBehindAncestors()')
   const el2 = getParent($el)
   let $el2 = $jquery.wrap(el2)
 
-  if (elHasPointerEventsNone($el2)) { //pointer-events: none
+  if (elHasPositionFixed($el)&&elHasPointerEventsNone($el2)) { //pointer-events: none
     return true
   }
 
@@ -256,7 +264,6 @@ const isBehindAncestors = (el: JQuery<any>, methodName = 'isBehindAncestors()')
     if (elHasNoEffectiveWidthOrHeight($el2)) {
       return true
     }
-
     return false
   }
 
@@ -379,7 +386,6 @@ const elHasDisplayInline = ($el) => {
 
 const elHasOverflowAuto = function ($el) {
   const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
-
   return cssOverflow.includes('auto')
 }
 
@@ -388,9 +394,11 @@ const elHasOverflowHidden = function ($el) {
 
   return cssOverflow.includes('hidden')
 }
+
 const elHasPointerEventsNone = ($el) => {
   return $el.css('pointer-events') === 'none'
 }
+
 const elHasPositionFixed = ($el) => {
   return $el.css('position') === 'fixed'
 }

From 9035412d08c25773e212db92038195a747b075f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 19 Jun 2024 14:02:36 +0200
Subject: [PATCH 06/42] clean code

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

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index a1f368dba76e..8a6c51447242 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -60,31 +60,38 @@ const isVisible = (el) => {
     }
 
     return true
-  }else{
-    // if ($transform.detectVisibility(el) === 'visible') {
-      // return true
+  }
+
+  // if ($transform.detectVisibility(el) === 'visible') {
+  // return true
   //   }
   return false
-  }
+
   //!isHidden(el, 'isVisible()')
 }
 //TODO real implementation check here
 const elIsOutsideOfView = (el) => {
   let rect = el.getBoundingClientRect()
-  let $el=$jquery.wrap(el)
+  let $el = $jquery.wrap(el)
+
   if (ifNoElementReturnFalse($el, 'elIsOutsideOfView()') && $el === undefined) {
     return false
   }
+
   if ($transform.detectVisibility($el) === 'visible') {
-    if(elHasPositionFixed($el)){
+    if (elHasPositionFixed($el)) {
       if (rect.left < 0 || rect.right < 0) return true
-      if(rect.y+rect.height<0) return true
+
+      if (rect.y + rect.height < 0) return true
     }
+
     return false
   }
+
   if ($transform.detectVisibility($el) === 'transformed') {
     return false
   }
+
   return false
 }
 
@@ -252,7 +259,7 @@ const isBehindAncestors = (el: JQuery<any>, methodName = 'isBehindAncestors()')
   const el2 = getParent($el)
   let $el2 = $jquery.wrap(el2)
 
-  if (elHasPositionFixed($el)&&elHasPointerEventsNone($el2)) { //pointer-events: none
+  if (elHasPositionFixed($el) && elHasPointerEventsNone($el2)) { //pointer-events: none
     return true
   }
 
@@ -264,6 +271,7 @@ const isBehindAncestors = (el: JQuery<any>, methodName = 'isBehindAncestors()')
     if (elHasNoEffectiveWidthOrHeight($el2)) {
       return true
     }
+
     return false
   }
 
@@ -386,6 +394,7 @@ const elHasDisplayInline = ($el) => {
 
 const elHasOverflowAuto = function ($el) {
   const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
+
   return cssOverflow.includes('auto')
 }
 

From b611dcfeae1231b8750f642113cd01942a32a6c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Mon, 24 Jun 2024 15:07:18 +0200
Subject: [PATCH 07/42] first draft version

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

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 8a6c51447242..9b71fb0d89d4 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -18,6 +18,59 @@ let optionsObject = {
   contentVisibilityAuto: true,
 }
 
+function isBehindOtherElement (element, parent) {
+// console.log()
+// console.log(parent)
+  // const boundingRect = element.getBoundingClientRect()
+  // // adjust coordinates to get more accurate results
+  // const left = boundingRect.left + 1
+  // const right = boundingRect.right - 1
+  // const top = boundingRect.top + 1
+  // const bottom = boundingRect.bottom - 1
+  // let result1,result2, result3,result4
+
+  // console.log('is visible old '+isVisibleOld(element))
+  return isVisibleOld(element)
+  // console.log('left '+left)
+  // console.log('right '+right)
+  //   console.log('top '+top)
+  //   // console.log('bottom '+bottom)
+  //   // console.log(jqueryEl.offset().top)
+  //   let runnerMainWindow=document.getElementById('unified-runner')
+  //   let elOffsetWidth: number| undefined=runnerMainWindow?.offsetWidth
+  //   if(elOffsetWidth!==undefined){
+  //   let  offsetWidth=elOffsetWidth
+  //   console.log(' o '+offsetWidth)
+  //   // console.log('from left '+document.elementsFromPoint(left+ offsetWidth, top))
+  //   let elementsFromPoint=document.elementsFromPoint(left+ offsetWidth, top)
+  //   // console.log()
+  //   for(let elFromPoint of elementsFromPoint){
+  // console.log(elFromPoint)
+  //   }
+  // console.log(' no of siblings ')
+  //lastChild
+  // !!
+  // console.log(getParent(parent))
+  // if(element.siblings().length>0)
+  //   {return true
+
+  //   }
+  // }
+  //const fixed = [].filter.call(document.all, e => getComputedStyle(e).position == 'fixed');
+
+//console.log(fixed)
+  // if(!element.contains(document.elementFromPoint(left, top))) result1=true
+  // if(!element.contains(document.elementFromPoint(right, top))) result2=true
+  // if(!element.contains(document.elementFromPoint(left, bottom))) result3=true
+  // if(!element.contains(document.elementFromPoint(right, bottom))) result4=true
+  // console.log('res1 '+result1+ ' r2 '+result2+' r3 '+result3+ ' r4 '+result4)
+  // if(result1&&result2&&result3&&result4)
+  //   return true
+  // console.log('vis '+element.checkVisibility(optionsObject))
+  // return !element.checkVisibility(optionsObject)
+  // return false
+}
+
 const isVisible = (el) => {
   ensureEl(el, 'isVisible()')
 
@@ -42,11 +95,6 @@ const isVisible = (el) => {
   }
 
   if (el.checkVisibility(optionsObject) === true) {
-  //   const isBehindOtherElement2= isBehindOtherElement(el);
-  // // console.log('returned '+isBehindOtherElement2)
-  // if (isBehindOtherElement2 === true) {
-  //   return false
-  // }
     const isOutsideOfView = elIsOutsideOfView(el)
 
     if (isOutsideOfView === true) {
@@ -62,12 +110,22 @@ const isVisible = (el) => {
     return true
   }
 
-  // if ($transform.detectVisibility(el) === 'visible') {
-  // return true
-  //   }
   return false
+}
+
+//Should not be needed in future
+const isVisibleOld = (el, methodName = 'isVisibleOld') => {
+  let oldOptions = {
+    checkOpacity: true, checkVisibilityCSS: false,
+    opacityPropert: false,
+    contentVisibilityAuto: false,
+  }
 
-  //!isHidden(el, 'isVisible()')
+  if (isStrictlyHidden(el, methodName, oldOptions, isHidden)) {
+    return true
+  }
+
+  return isHiddenByAncestors(el, methodName, oldOptions)
 }
 //TODO real implementation check here
 const elIsOutsideOfView = (el) => {
@@ -260,7 +318,8 @@ const isBehindAncestors = (el: JQuery<any>, methodName = 'isBehindAncestors()')
   let $el2 = $jquery.wrap(el2)
 
   if (elHasPositionFixed($el) && elHasPointerEventsNone($el2)) { //pointer-events: none
-    return true
+    return isBehindOtherElement($el, $el2)//isBehindOtherElement($jquery.unwrap($el)[0],$jquery.unwrap($el2)[0])
+    //
   }
 
   if (elHasPositionAbsolute($el2) || elHasOverflowAuto($el2) || elHasPositionFixed($el2)) {

From 16897b3522228965a10d79f9e3ef59bf6a4857fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Mon, 24 Jun 2024 15:54:40 +0200
Subject: [PATCH 08/42] working version

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

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 9b71fb0d89d4..719a448266f1 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -12,8 +12,8 @@ const fixedOrAbsoluteRe = /(fixed|absolute)/
 const OVERFLOW_PROPS = ['hidden', 'scroll', 'auto']
 const { wrap } = $jquery
 let optionsObject = {
-  checkVisibilityCSS: true,
   checkOpacity: true,
+  checkVisibilityCSS: true,
   opacityPropert: true,
   contentVisibilityAuto: true,
 }
@@ -94,6 +94,8 @@ const isVisible = (el) => {
     return false
   }
 
+  // console.log("in browser visibility")
+  // console.log(el.checkVisibility(optionsObject))
   if (el.checkVisibility(optionsObject) === true) {
     const isOutsideOfView = elIsOutsideOfView(el)
 
@@ -315,30 +317,34 @@ const isBehindAncestors = (el: JQuery<any>, methodName = 'isBehindAncestors()')
   }
 
   const el2 = getParent($el)
-  let $el2 = $jquery.wrap(el2)
+  let $parent = $jquery.wrap(el2)
 
-  if (elHasPositionFixed($el) && elHasPointerEventsNone($el2)) { //pointer-events: none
-    return isBehindOtherElement($el, $el2)//isBehindOtherElement($jquery.unwrap($el)[0],$jquery.unwrap($el2)[0])
+  if (elHasPositionFixed($el) && elHasPointerEventsNone($parent)) { //pointer-events: none
+    return isBehindOtherElement($el, $parent)//isBehindOtherElement($jquery.unwrap($el)[0],$jquery.unwrap($el2)[0])
     //
   }
 
-  if (elHasPositionAbsolute($el2) || elHasOverflowAuto($el2) || elHasPositionFixed($el2)) {
+  if (elHasPositionFixed($parent)) {
+    return false
+  }
+
+  if (elHasPositionAbsolute($parent) || elHasOverflowAuto($parent)) {
     return false
   }
 
-  if (elHasOverflowHidden($el2)) {
-    if (elHasNoEffectiveWidthOrHeight($el2)) {
+  if (elHasOverflowHidden($parent)) {
+    if (elHasNoEffectiveWidthOrHeight($parent)) {
       return true
     }
 
     return false
   }
 
-  if ($el2.prop('tagName') === 'BODY') {
+  if ($parent.prop('tagName') === 'BODY') {
     return false
   }
 
-  return isBehindAncestors($el2, methodName)
+  return isBehindAncestors($parent, methodName)
 }
 
 // return false

From d379ed1c1a0de62fb63629ae84a00594c1cd53f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Mon, 24 Jun 2024 16:01:25 +0200
Subject: [PATCH 09/42] method cleanup

---
 packages/driver/src/dom/visibility.ts | 107 +++++++++++++-------------
 1 file changed, 54 insertions(+), 53 deletions(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 719a448266f1..174b88524bcd 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -18,58 +18,58 @@ let optionsObject = {
   contentVisibilityAuto: true,
 }
 
-function isBehindOtherElement (element, parent) {
-// console.log()
-// console.log(parent)
-  // const boundingRect = element.getBoundingClientRect()
-  // // adjust coordinates to get more accurate results
-  // const left = boundingRect.left + 1
-  // const right = boundingRect.right - 1
-  // const top = boundingRect.top + 1
-  // const bottom = boundingRect.bottom - 1
-  // let result1,result2, result3,result4
-
-  // console.log('is visible old '+isVisibleOld(element))
-  return isVisibleOld(element)
-  // console.log('left '+left)
-  // console.log('right '+right)
-  //   console.log('top '+top)
-  //   // console.log('bottom '+bottom)
-  //   // console.log(jqueryEl.offset().top)
-  //   let runnerMainWindow=document.getElementById('unified-runner')
-  //   let elOffsetWidth: number| undefined=runnerMainWindow?.offsetWidth
-  //   if(elOffsetWidth!==undefined){
-  //   let  offsetWidth=elOffsetWidth
-  //   console.log(' o '+offsetWidth)
-  //   // console.log('from left '+document.elementsFromPoint(left+ offsetWidth, top))
-  //   let elementsFromPoint=document.elementsFromPoint(left+ offsetWidth, top)
-  //   // console.log()
-  //   for(let elFromPoint of elementsFromPoint){
-  // console.log(elFromPoint)
-  //   }
-  // console.log(' no of siblings ')
-  //lastChild
-  // !!
-  // console.log(getParent(parent))
-  // if(element.siblings().length>0)
-  //   {return true
-
-  //   }
-  // }
-  //const fixed = [].filter.call(document.all, e => getComputedStyle(e).position == 'fixed');
-
-//console.log(fixed)
-  // if(!element.contains(document.elementFromPoint(left, top))) result1=true
-  // if(!element.contains(document.elementFromPoint(right, top))) result2=true
-  // if(!element.contains(document.elementFromPoint(left, bottom))) result3=true
-  // if(!element.contains(document.elementFromPoint(right, bottom))) result4=true
-  // console.log('res1 '+result1+ ' r2 '+result2+' r3 '+result3+ ' r4 '+result4)
-  // if(result1&&result2&&result3&&result4)
-  //   return true
-  // console.log('vis '+element.checkVisibility(optionsObject))
-  // return !element.checkVisibility(optionsObject)
-  // return false
-}
+// function isBehindOtherElement (element, parent) {
+// // console.log()
+// // console.log(parent)
+//   // const boundingRect = element.getBoundingClientRect()
+//   // // adjust coordinates to get more accurate results
+//   // const left = boundingRect.left + 1
+//   // const right = boundingRect.right - 1
+//   // const top = boundingRect.top + 1
+//   // const bottom = boundingRect.bottom - 1
+//   // let result1,result2, result3,result4
+
+//   // console.log('is visible old '+isVisibleOld(element))
+//   return isVisibleOld(element)
+//   // console.log('left '+left)
+//   // console.log('right '+right)
+//   //   console.log('top '+top)
+//   //   // console.log('bottom '+bottom)
+//   //   // console.log(jqueryEl.offset().top)
+//   //   let runnerMainWindow=document.getElementById('unified-runner')
+//   //   let elOffsetWidth: number| undefined=runnerMainWindow?.offsetWidth
+//   //   if(elOffsetWidth!==undefined){
+//   //   let  offsetWidth=elOffsetWidth
+//   //   console.log(' o '+offsetWidth)
+//   //   // console.log('from left '+document.elementsFromPoint(left+ offsetWidth, top))
+//   //   let elementsFromPoint=document.elementsFromPoint(left+ offsetWidth, top)
+//   //   // console.log()
+//   //   for(let elFromPoint of elementsFromPoint){
+//   // console.log(elFromPoint)
+//   //   }
+//   // console.log(' no of siblings ')
+//   //lastChild
+//   // !!
+//   // console.log(getParent(parent))
+//   // if(element.siblings().length>0)
+//   //   {return true
+
+//   //   }
+//   // }
+//   //const fixed = [].filter.call(document.all, e => getComputedStyle(e).position == 'fixed');
+
+// //console.log(fixed)
+//   // if(!element.contains(document.elementFromPoint(left, top))) result1=true
+//   // if(!element.contains(document.elementFromPoint(right, top))) result2=true
+//   // if(!element.contains(document.elementFromPoint(left, bottom))) result3=true
+//   // if(!element.contains(document.elementFromPoint(right, bottom))) result4=true
+//   // console.log('res1 '+result1+ ' r2 '+result2+' r3 '+result3+ ' r4 '+result4)
+//   // if(result1&&result2&&result3&&result4)
+//   //   return true
+//   // console.log('vis '+element.checkVisibility(optionsObject))
+//   // return !element.checkVisibility(optionsObject)
+//   // return false
+// }
 
 const isVisible = (el) => {
   ensureEl(el, 'isVisible()')
@@ -320,7 +320,8 @@ const isBehindAncestors = (el: JQuery<any>, methodName = 'isBehindAncestors()')
   let $parent = $jquery.wrap(el2)
 
   if (elHasPositionFixed($el) && elHasPointerEventsNone($parent)) { //pointer-events: none
-    return isBehindOtherElement($el, $parent)//isBehindOtherElement($jquery.unwrap($el)[0],$jquery.unwrap($el2)[0])
+    return isVisibleOld($el)
+    //return isBehindOtherElement($el, $parent)//isBehindOtherElement($jquery.unwrap($el)[0],$jquery.unwrap($el2)[0])
     //
   }
 

From 2e29c5253719dd1ef66f4d4c03e5f9481b2f6db4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 25 Jun 2024 09:00:15 +0200
Subject: [PATCH 10/42] first working all tests

---
 .../driver/cypress/e2e/dom/visibility.cy.ts   |   6 +-
 packages/driver/src/dom/visibility.ts         | 152 ++++++------------
 2 files changed, 55 insertions(+), 103 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index ec8a589d7ee0..bcf42d59a18d 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -771,7 +771,7 @@ describe('src/cypress/dom/visibility', () => {
 
       it('is hidden if position: fixed and covered up', function () {
         expect(this.$coveredUpPosFixed.find('#coveredUpPosFixed')).to.be.hidden
-        expect(this.$coveredUpPosFixed.find('#coveredUpPosFixed')).to.be.visible
+        expect(this.$coveredUpPosFixed.find('#coveredUpPosFixed')).to.not.be.visible
       })
 
       it('is hidden if position: fixed and off screen', function () {
@@ -786,7 +786,7 @@ describe('src/cypress/dom/visibility', () => {
 
       it('is hidden if only the parent has position absolute', function () {
         expect(this.$parentPosAbs.find('span#parentPosAbs')).to.be.hidden
-        expect(this.$parentPosAbs.find('span#parentPosAbs')).to.be.visible
+        expect(this.$parentPosAbs.find('span#parentPosAbs')).to.not.be.visible
       })
 
       it('is visible if position: fixed and parent has pointer-events: none', function () {
@@ -823,7 +823,7 @@ describe('src/cypress/dom/visibility', () => {
 
     describe('css overflow', () => {
       it('is hidden when parent overflow auto and no width/height', function () {
-        expect(this.$parentNoWidthHeightOverflowAuto.find('span#parentNoWidthHeightOverflowAuto')).to.be.visible
+        expect(this.$parentNoWidthHeightOverflowAuto.find('span#parentNoWidthHeightOverflowAuto')).to.not.be.visible
         expect(this.$parentNoWidthHeightOverflowAuto.find('span#parentNoWidthHeightOverflowAuto')).to.be.hidden
       })
 
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 174b88524bcd..c1176b1921fe 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -94,18 +94,19 @@ const isVisible = (el) => {
     return false
   }
 
-  // console.log("in browser visibility")
-  // console.log(el.checkVisibility(optionsObject))
   if (el.checkVisibility(optionsObject) === true) {
-    const isOutsideOfView = elIsOutsideOfView(el)
+    // const notVisibleBecauseOfAncestor = isBehindAncestors(el)
+    // if (notVisibleBecauseOfAncestor === true) {
+    //   return false
+    // }
 
-    if (isOutsideOfView === true) {
+    if (isHiddenByAncestors(el)) {
       return false
     }
 
-    const notVisibleBecauseOfAncestor = isBehindAncestors(el)
+    const isOutsideOfView = elIsOutsideOfView(el)
 
-    if (notVisibleBecauseOfAncestor === true) {
+    if (isOutsideOfView === true) {
       return false
     }
 
@@ -115,20 +116,20 @@ const isVisible = (el) => {
   return false
 }
 
-//Should not be needed in future
-const isVisibleOld = (el, methodName = 'isVisibleOld') => {
-  let oldOptions = {
-    checkOpacity: true, checkVisibilityCSS: false,
-    opacityPropert: false,
-    contentVisibilityAuto: false,
-  }
+// //Should not be needed in future
+// const isVisibleOld = (el, methodName = 'isVisibleOld') => {
+//   let oldOptions = {
+//     checkOpacity: true, checkVisibilityCSS: false,
+//     opacityPropert: false,
+//     contentVisibilityAuto: false,
+//   }
 
-  if (isStrictlyHidden(el, methodName, oldOptions, isHidden)) {
-    return true
-  }
+//   if (isStrictlyHidden(el, methodName, oldOptions, isHidden)) {
+//     return true
+//   }
 
-  return isHiddenByAncestors(el, methodName, oldOptions)
-}
+//   return isHiddenByAncestors(el, methodName, oldOptions)
+// }
 //TODO real implementation check here
 const elIsOutsideOfView = (el) => {
   let rect = el.getBoundingClientRect()
@@ -174,39 +175,6 @@ const checkIsOptionVisible = (el) => {
   return 0 //this signal not option element
 }
 
-// const isElOutsideOfView = function(element,percentVisible=100) {
-//   // let
-//   //   rect = el.getBoundingClientRect(),
-//   //   windowHeight = (window.innerHeight || document.documentElement.clientHeight)
-//   //   if(el.tagName==='BUTTON'){
-//   //     console.log(" top "+rect.top)
-//   //     console.log(" height "+rect.height)
-//   //     console.log(" rect.bottom "+rect.bottom)
-//   //     console.log(" windowHeight "+windowHeight)
-//   //     let resTop=Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-rect.height) * 100))
-//   //     console.log('MathHeight '+resTop)
-//   //     let resHeight=Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100)
-//   //     console.log('MathHeight '+resHeight)
-//   //     console.log('flor ='+Math.floor((rect.bottom - windowHeight) / rect.height) )
-//   //   }
-//     if(element.offsetTop<window.innerHeight &&
-//       element.offsetTop>-element.offsetHeight
-//     && element.offsetLeft>-element.offsetWidth
-//     && element.offsetLeft<window.innerWidth){
-//      return false;
-//    } else {
-
-//      return true;
-//    }
-
-// if (
-//   // el width not in viewport
-//   el.left<0|| (el.width + el.left)<0 ||
-//   el.top<0 || el.top+el.height<0 ) {
-//   return true
-// }else return false}
-// }else return false
-// }
 // TODO: we should prob update dom
 // to be passed in $utils as a dependency
 // because of circular references
@@ -297,56 +265,50 @@ const isStrictlyHidden = (el, methodName = 'isStrictlyHidden()', options = { che
   return false
 }
 
-const isBehindAncestors = (el: JQuery<any>, methodName = 'isBehindAncestors()') => {
-  if (ifNoElementReturnFalse(el, methodName) && el === undefined) {
-    return false
-  }
+// const isBehindAncestors = (el: JQuery<any>, methodName = 'isBehindAncestors()') => {
+//   if (ifNoElementReturnFalse(el, methodName) && el === undefined) {
+//     return false
+//   }
 
-  const $el = $jquery.wrap(el)
+//   const $el = $jquery.wrap(el)
 
-  if (isBody(el) || isHTML(el)) {
-    return false // is visible
-  }
+//   if (isBody(el) || isHTML(el)) {
+//     return false // is visible
+//   }
 
-  if (ifNoElementReturnFalse($el, methodName) && $el === undefined) {
-    return false
-  }
+//   if (ifNoElementReturnFalse($el, methodName) && $el === undefined) {
+//     return false
+//   }
 
-  if (elHasPositionAbsolute($el)) {
-    return false
-  }
+//   if (elHasPositionAbsolute($el)) {
+//     return false
+//   }
 
-  const el2 = getParent($el)
-  let $parent = $jquery.wrap(el2)
+//   const el2 = getParent($el)
+//   let $parent = $jquery.wrap(el2)
 
-  if (elHasPositionFixed($el) && elHasPointerEventsNone($parent)) { //pointer-events: none
-    return isVisibleOld($el)
-    //return isBehindOtherElement($el, $parent)//isBehindOtherElement($jquery.unwrap($el)[0],$jquery.unwrap($el2)[0])
-    //
-  }
+//   if (elHasPositionFixed($el) && elHasPointerEventsNone($parent)) { //pointer-events: none
+//     return isVisibleOld($el)
+//   }
 
-  if (elHasPositionFixed($parent)) {
-    return false
-  }
-
-  if (elHasPositionAbsolute($parent) || elHasOverflowAuto($parent)) {
-    return false
-  }
+//   if (elHasPositionAbsolute($parent) || elHasOverflowAuto($parent) || elHasPositionFixed($parent)) {
+//     return false
+//   }
 
-  if (elHasOverflowHidden($parent)) {
-    if (elHasNoEffectiveWidthOrHeight($parent)) {
-      return true
-    }
+//   if (elHasOverflowHidden($parent)) {
+//     if (parentHasNoOffsetWidthOrHeightAndOverflowHidden($el)) {//&& !elHasDisplayBlock($parent)
+//       return true
+//     }
 
-    return false
-  }
+//     return false
+//   }
 
-  if ($parent.prop('tagName') === 'BODY') {
-    return false
-  }
+//   if ($parent.prop('tagName') === 'BODY') {
+//     return false
+//   }
 
-  return isBehindAncestors($parent, methodName)
-}
+//   return isBehindAncestors($parent, methodName)
+// }
 
 // return false
 // if(elHasVisibilityHidden(el)){
@@ -458,22 +420,12 @@ const elHasDisplayInline = ($el) => {
   return $el.css('display') === 'inline'
 }
 
-const elHasOverflowAuto = function ($el) {
-  const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
-
-  return cssOverflow.includes('auto')
-}
-
 const elHasOverflowHidden = function ($el) {
   const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
 
   return cssOverflow.includes('hidden')
 }
 
-const elHasPointerEventsNone = ($el) => {
-  return $el.css('pointer-events') === 'none'
-}
-
 const elHasPositionFixed = ($el) => {
   return $el.css('position') === 'fixed'
 }

From d1b218fa62fca1219001b7f47b9d2d96f123e567 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 25 Jun 2024 09:06:43 +0200
Subject: [PATCH 11/42] 23852 fix

---
 .../driver/cypress/e2e/issues/23852.cy.js     | 12 +++
 .../driver/cypress/fixtures/issue-23852.html  |  4 +
 packages/driver/src/dom/visibility.ts         | 74 +------------------
 3 files changed, 17 insertions(+), 73 deletions(-)
 create mode 100644 packages/driver/cypress/e2e/issues/23852.cy.js
 create mode 100644 packages/driver/cypress/fixtures/issue-23852.html

diff --git a/packages/driver/cypress/e2e/issues/23852.cy.js b/packages/driver/cypress/e2e/issues/23852.cy.js
new file mode 100644
index 000000000000..0324feb3f246
--- /dev/null
+++ b/packages/driver/cypress/e2e/issues/23852.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-23852.html')
+  })
+
+  it('can click element when effective 0 width parent used', () => {
+    expect(cy.$$('#hidden')).to.not.be.visible
+    //cy.get('#id2 >div > p').click()
+  })
+})
diff --git a/packages/driver/cypress/fixtures/issue-23852.html b/packages/driver/cypress/fixtures/issue-23852.html
new file mode 100644
index 000000000000..3b4dcc3aa5c6
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index c1176b1921fe..9cfe1fd1e9fd 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -18,59 +18,6 @@ let optionsObject = {
   contentVisibilityAuto: true,
 }
 
-// function isBehindOtherElement (element, parent) {
-// // console.log()
-// // console.log(parent)
-//   // const boundingRect = element.getBoundingClientRect()
-//   // // adjust coordinates to get more accurate results
-//   // const left = boundingRect.left + 1
-//   // const right = boundingRect.right - 1
-//   // const top = boundingRect.top + 1
-//   // const bottom = boundingRect.bottom - 1
-//   // let result1,result2, result3,result4
-
-//   // console.log('is visible old '+isVisibleOld(element))
-//   return isVisibleOld(element)
-//   // console.log('left '+left)
-//   // console.log('right '+right)
-//   //   console.log('top '+top)
-//   //   // console.log('bottom '+bottom)
-//   //   // console.log(jqueryEl.offset().top)
-//   //   let runnerMainWindow=document.getElementById('unified-runner')
-//   //   let elOffsetWidth: number| undefined=runnerMainWindow?.offsetWidth
-//   //   if(elOffsetWidth!==undefined){
-//   //   let  offsetWidth=elOffsetWidth
-//   //   console.log(' o '+offsetWidth)
-//   //   // console.log('from left '+document.elementsFromPoint(left+ offsetWidth, top))
-//   //   let elementsFromPoint=document.elementsFromPoint(left+ offsetWidth, top)
-//   //   // console.log()
-//   //   for(let elFromPoint of elementsFromPoint){
-//   // console.log(elFromPoint)
-//   //   }
-//   // console.log(' no of siblings ')
-//   //lastChild
-//   // !!
-//   // console.log(getParent(parent))
-//   // if(element.siblings().length>0)
-//   //   {return true
-
-//   //   }
-//   // }
-//   //const fixed = [].filter.call(document.all, e => getComputedStyle(e).position == 'fixed');
-
-// //console.log(fixed)
-//   // if(!element.contains(document.elementFromPoint(left, top))) result1=true
-//   // if(!element.contains(document.elementFromPoint(right, top))) result2=true
-//   // if(!element.contains(document.elementFromPoint(left, bottom))) result3=true
-//   // if(!element.contains(document.elementFromPoint(right, bottom))) result4=true
-//   // console.log('res1 '+result1+ ' r2 '+result2+' r3 '+result3+ ' r4 '+result4)
-//   // if(result1&&result2&&result3&&result4)
-//   //   return true
-//   // console.log('vis '+element.checkVisibility(optionsObject))
-//   // return !element.checkVisibility(optionsObject)
-//   // return false
-// }
-
 const isVisible = (el) => {
   ensureEl(el, 'isVisible()')
 
@@ -95,11 +42,6 @@ const isVisible = (el) => {
   }
 
   if (el.checkVisibility(optionsObject) === true) {
-    // const notVisibleBecauseOfAncestor = isBehindAncestors(el)
-    // if (notVisibleBecauseOfAncestor === true) {
-    //   return false
-    // }
-
     if (isHiddenByAncestors(el)) {
       return false
     }
@@ -116,20 +58,6 @@ const isVisible = (el) => {
   return false
 }
 
-// //Should not be needed in future
-// const isVisibleOld = (el, methodName = 'isVisibleOld') => {
-//   let oldOptions = {
-//     checkOpacity: true, checkVisibilityCSS: false,
-//     opacityPropert: false,
-//     contentVisibilityAuto: false,
-//   }
-
-//   if (isStrictlyHidden(el, methodName, oldOptions, isHidden)) {
-//     return true
-//   }
-
-//   return isHiddenByAncestors(el, methodName, oldOptions)
-// }
 //TODO real implementation check here
 const elIsOutsideOfView = (el) => {
   let rect = el.getBoundingClientRect()
@@ -423,7 +351,7 @@ const elHasDisplayInline = ($el) => {
 const elHasOverflowHidden = function ($el) {
   const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
 
-  return cssOverflow.includes('hidden')
+  return cssOverflow.includes('hidden') || cssOverflow.includes('clip')
 }
 
 const elHasPositionFixed = ($el) => {

From 455ff940c48bef7c565b5b3ef986a2f3df4c46cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 25 Jun 2024 09:48:43 +0200
Subject: [PATCH 12/42] fix for 28187

---
 packages/driver/cypress/e2e/issues/28187.cy.js    | 6 ++++++
 packages/driver/cypress/fixtures/issue-28187.html | 9 +++++++++
 packages/driver/src/dom/visibility.ts             | 4 +---
 3 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 packages/driver/cypress/e2e/issues/28187.cy.js
 create mode 100644 packages/driver/cypress/fixtures/issue-28187.html

diff --git a/packages/driver/cypress/e2e/issues/28187.cy.js b/packages/driver/cypress/e2e/issues/28187.cy.js
new file mode 100644
index 000000000000..eda11f839028
--- /dev/null
+++ b/packages/driver/cypress/e2e/issues/28187.cy.js
@@ -0,0 +1,6 @@
+it('hidden check', () => {
+  cy.visit('/fixtures/issue-28187.html')
+  cy.get('details')
+  .children('div')
+  .should('not.be.visible')
+})
diff --git a/packages/driver/cypress/fixtures/issue-28187.html b/packages/driver/cypress/fixtures/issue-28187.html
new file mode 100644
index 000000000000..aefadde48e16
--- /dev/null
+++ b/packages/driver/cypress/fixtures/issue-28187.html
@@ -0,0 +1,9 @@
+<html>
+
+<body>
+  <details>
+    <summary> visible </summary>
+    <div> hidden <div>
+  </details>
+</body>
+</html>
\ No newline at end of file
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 9cfe1fd1e9fd..66ca76f27cfd 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -25,9 +25,7 @@ const isVisible = (el) => {
     return true // is visible
   }
 
-  const striclyHidden = isStrictlyHidden(el)
-
-  if (striclyHidden) {
+  if (isStrictlyHidden(el)) {
     return false
   }
 

From 1f7e60e692bd7cce8720d51c1bdd6a42c416c8b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 25 Jun 2024 09:51:13 +0200
Subject: [PATCH 13/42] cleanu that previously was not send

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

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 66ca76f27cfd..86179c58273f 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -44,44 +44,12 @@ const isVisible = (el) => {
       return false
     }
 
-    const isOutsideOfView = elIsOutsideOfView(el)
-
-    if (isOutsideOfView === true) {
-      return false
-    }
-
     return true
   }
 
   return false
 }
 
-//TODO real implementation check here
-const elIsOutsideOfView = (el) => {
-  let rect = el.getBoundingClientRect()
-  let $el = $jquery.wrap(el)
-
-  if (ifNoElementReturnFalse($el, 'elIsOutsideOfView()') && $el === undefined) {
-    return false
-  }
-
-  if ($transform.detectVisibility($el) === 'visible') {
-    if (elHasPositionFixed($el)) {
-      if (rect.left < 0 || rect.right < 0) return true
-
-      if (rect.y + rect.height < 0) return true
-    }
-
-    return false
-  }
-
-  if ($transform.detectVisibility($el) === 'transformed') {
-    return false
-  }
-
-  return false
-}
-
 const checkIsOptionVisible = (el) => {
   // an option is considered visible if its parent select is visible
   if (isOption(el) || isOptgroup(el)) {
@@ -115,14 +83,6 @@ const isHidden = (el, methodName = 'isHidden()', options = { checkOpacity: true,
   return isHiddenByAncestors(el, methodName, options)
 }
 
-const ifNoElementReturnFalse = (el, methodName) => {
-  if (!isElement(el)) {
-    return false
-  }
-
-  return true
-}
-
 const ensureEl = (el, methodName) => {
   if (!isElement(el)) {
     throw new Error(`\`Cypress.dom.${methodName}\` failed because it requires a DOM element. The subject received was: \`${el}\``)
@@ -191,65 +151,6 @@ const isStrictlyHidden = (el, methodName = 'isStrictlyHidden()', options = { che
   return false
 }
 
-// const isBehindAncestors = (el: JQuery<any>, methodName = 'isBehindAncestors()') => {
-//   if (ifNoElementReturnFalse(el, methodName) && el === undefined) {
-//     return false
-//   }
-
-//   const $el = $jquery.wrap(el)
-
-//   if (isBody(el) || isHTML(el)) {
-//     return false // is visible
-//   }
-
-//   if (ifNoElementReturnFalse($el, methodName) && $el === undefined) {
-//     return false
-//   }
-
-//   if (elHasPositionAbsolute($el)) {
-//     return false
-//   }
-
-//   const el2 = getParent($el)
-//   let $parent = $jquery.wrap(el2)
-
-//   if (elHasPositionFixed($el) && elHasPointerEventsNone($parent)) { //pointer-events: none
-//     return isVisibleOld($el)
-//   }
-
-//   if (elHasPositionAbsolute($parent) || elHasOverflowAuto($parent) || elHasPositionFixed($parent)) {
-//     return false
-//   }
-
-//   if (elHasOverflowHidden($parent)) {
-//     if (parentHasNoOffsetWidthOrHeightAndOverflowHidden($el)) {//&& !elHasDisplayBlock($parent)
-//       return true
-//     }
-
-//     return false
-//   }
-
-//   if ($parent.prop('tagName') === 'BODY') {
-//     return false
-//   }
-
-//   return isBehindAncestors($parent, methodName)
-// }
-
-// return false
-// if(elHasVisibilityHidden(el)){
-//   console.log('got hidden')
-// }
-//console.log(el)
-//const hasParentAbsolut = getFirstAbsolutePositionParent(el)
-// if (elOrAncestorIsFixedOrSticky($el)) {
-//   return elIsNotElementFromPoint($el)
-// }
-// const hasAbsolute=elHasPositionAbsolute($el)
-// console.log('hasParentAbsolutStart '+ hasAbsolute)
-// return hasAbsolute
-// }
-
 const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityPropert: true,
   contentVisibilityAuto: true }) => {
   ensureEl(el, methodName)
@@ -352,10 +253,6 @@ const elHasOverflowHidden = function ($el) {
   return cssOverflow.includes('hidden') || cssOverflow.includes('clip')
 }
 
-const elHasPositionFixed = ($el) => {
-  return $el.css('position') === 'fixed'
-}
-
 const elHasPositionRelative = ($el) => {
   return $el.css('position') === 'relative'
 }

From 008823dba01775808bbca1a2712bd6f961e839bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 25 Jun 2024 11:31:57 +0200
Subject: [PATCH 14/42] fixes for less checks

---
 .../driver/cypress/e2e/dom/visibility.cy.ts   |  6 +--
 packages/driver/src/dom/visibility.ts         | 37 ++++++++++---------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index bcf42d59a18d..8a057b3dba0a 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -723,13 +723,13 @@ 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
+        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.be.visible
 
         cy.wrap(this.$divNoWidth).should('be.hidden')
-        cy.wrap(this.$divNoWidth).should('not.be.visible')
+        cy.wrap(this.$divNoWidth).should('be.visible')
       })
 
       it('is hidden if parent has overflow: hidden and no width', function () {
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 86179c58273f..6b7ade79bd92 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -21,11 +21,7 @@ let optionsObject = {
 const isVisible = (el) => {
   ensureEl(el, 'isVisible()')
 
-  if (isBody(el) || isHTML(el)) {
-    return true // is visible
-  }
-
-  if (isStrictlyHidden(el)) {
+  if (isVisibilityVisible(el)) {
     return false
   }
 
@@ -39,27 +35,25 @@ const isVisible = (el) => {
     return false
   }
 
-  if (el.checkVisibility(optionsObject) === true) {
-    if (isHiddenByAncestors(el)) {
-      return false
-    }
-
-    return true
-  }
-
-  return false
+  return el.checkVisibility(optionsObject) && !isHiddenByAncestors(el)
 }
 
 const checkIsOptionVisible = (el) => {
   // an option is considered visible if its parent select is visible
   if (isOption(el) || isOptgroup(el)) {
+    const $el = $jquery.wrap(el)
+
+    if (elHasDisplayNone($el)) {
+      return 2
+    }
+
     // if its parent select is visible, then it's not hidden
-    const $select = getFirstParentWithTagName(el, 'select')
+    const $select = getFirstParentWithTagName($el, 'select')
 
     if ($select && $select.length) {
       // if the select is hidden, the options in it are not visible too
-      if ($select.checkVisibility(optionsObject) === false) {
-        return 1 //this signal not visible
+      if (isStrictlyHidden($select)) {
+        return 2 //this signal not visible
       }
     }
 
@@ -151,6 +145,15 @@ const isStrictlyHidden = (el, methodName = 'isStrictlyHidden()', options = { che
   return false
 }
 
+const isVisibilityVisible = (el) => {
+  const $el = $jquery.wrap(el)
+
+  if ($transform.detectVisibility($el) !== 'visible') {
+    return true
+  }
+
+  return false
+}
 const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityPropert: true,
   contentVisibilityAuto: true }) => {
   ensureEl(el, methodName)

From 9bc9afdeda4c717d7578769b88cc0dd13d8b3fd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 25 Jun 2024 12:04:38 +0200
Subject: [PATCH 15/42] remove 23852 fix

---
 packages/driver/cypress/e2e/issues/23852.cy.js    | 12 ------------
 packages/driver/cypress/fixtures/issue-23852.html |  4 ----
 packages/driver/src/dom/visibility.ts             |  2 +-
 3 files changed, 1 insertion(+), 17 deletions(-)
 delete mode 100644 packages/driver/cypress/e2e/issues/23852.cy.js
 delete mode 100644 packages/driver/cypress/fixtures/issue-23852.html

diff --git a/packages/driver/cypress/e2e/issues/23852.cy.js b/packages/driver/cypress/e2e/issues/23852.cy.js
deleted file mode 100644
index 0324feb3f246..000000000000
--- a/packages/driver/cypress/e2e/issues/23852.cy.js
+++ /dev/null
@@ -1,12 +0,0 @@
-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
-    //cy.get('#id2 >div > p').click()
-  })
-})
diff --git a/packages/driver/cypress/fixtures/issue-23852.html b/packages/driver/cypress/fixtures/issue-23852.html
deleted file mode 100644
index 3b4dcc3aa5c6..000000000000
--- a/packages/driver/cypress/fixtures/issue-23852.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 6b7ade79bd92..66b3240b5fa5 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -253,7 +253,7 @@ const elHasDisplayInline = ($el) => {
 const elHasOverflowHidden = function ($el) {
   const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
 
-  return cssOverflow.includes('hidden') || cssOverflow.includes('clip')
+  return cssOverflow.includes('hidden')
 }
 
 const elHasPositionRelative = ($el) => {

From 723d8ab92ce837bab59bd074becb869d094ee12a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 25 Jun 2024 12:25:54 +0200
Subject: [PATCH 16/42] changelog update

---
 cli/CHANGELOG.md | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index d89a23154989..3aff6a0569e8 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,7 +1,26 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 13.12.1
+
+_Released 7/02/2024 (PENDING)_
+
+**Performance:**
+
+- Improved performance of `experimentalSourceRewriting` option. Fixed in [#29540](https://github.com/cypress-io/cypress/pull/29540).
+
+**Bugfixes:**
+
+- Change visibility check to use checkVisibility browser API.Fixes [#28187](https://github.com/cypress-io/cypress/pull/29741). 
+- 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).
+
+**Dependency Updates:**
+
+- Updated `tmp` from `0.2.1` to `0.2.3`. Addresses [#29693](https://github.com/cypress-io/cypress/issues/29693).
+- Updated `ws` from `5.2.3` to `5.2.4`. Addressed in [#29698](https://github.com/cypress-io/cypress/pull/29698).
+
 ## 13.12.0
 
-_Released 6/18/2024 (PENDING)_
+_Released 6/18/2024_
 
 **Features:**
 
@@ -9,12 +28,13 @@ _Released 6/18/2024 (PENDING)_
 
 **Bugfixes:**
 
+- We now trigger `input` and `change` events when typing `{upArrow}` and `{downArrow}` via `.type()` on `input[type=number]` elements. Fixes [#29611](https://github.com/cypress-io/cypress/issues/29611)
 - Fixed an issue where auto scrolling the reporter would sometimes be disabled without the user's intent. Fixes [#25084](https://github.com/cypress-io/cypress/issues/25084).
 - 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).
 
-**Misc:** 
+**Misc:**
 
 - Report afterSpec durations to Cloud API when running in record mode with Test Replay enabled. Addressed in [#29500](https://github.com/cypress-io/cypress/pull/29500).
 
@@ -960,4 +980,4 @@ _Released 1/24/2023_
 
 - Video output link in `cypress run` mode has been added to it's own line to
   make the video output link more easily clickable in the terminal. Addresses
-  [#23913](https://github.com/cypress-io/cypress/issues/23913).
+  [#23913](https://github.com/cypress-io/cypress/issues/23913).
\ No newline at end of file

From ddf7227729d7a5363a57c959c78ab0ed4858df43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 25 Jun 2024 12:31:04 +0200
Subject: [PATCH 17/42] changelog fix

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

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 3aff6a0569e8..cdc0f328c4c6 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -9,7 +9,7 @@ _Released 7/02/2024 (PENDING)_
 
 **Bugfixes:**
 
-- Change visibility check to use checkVisibility browser API.Fixes [#28187](https://github.com/cypress-io/cypress/pull/29741). 
+- Change visibility check to use checkVisibility browser API.Fixes [#28187](https://github.com/cypress-io/cypress/pull/28187).
 - 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).
 

From 27a73d3c7e1165aefa76e74105ae27586766d92e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 25 Jun 2024 12:33:27 +0200
Subject: [PATCH 18/42] changelog pull

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

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index cdc0f328c4c6..df00a4a75694 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -9,7 +9,7 @@ _Released 7/02/2024 (PENDING)_
 
 **Bugfixes:**
 
-- Change visibility check to use checkVisibility browser API.Fixes [#28187](https://github.com/cypress-io/cypress/pull/28187).
+- Change visibility check to use checkVisibility browser API. Fixed in [#29741](https://github.com/cypress-io/cypress/pull/29741).
 - 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).
 

From 4c70ef5184b8db3cbb71cd69071ebc9fe6a51e95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Thu, 27 Jun 2024 10:31:16 +0200
Subject: [PATCH 19/42] pipeline tests fix

---
 .../driver/cypress/e2e/dom/visibility.cy.ts   |  5 -----
 packages/driver/src/dom/visibility.ts         | 19 ++++++++++++++-----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index 8a057b3dba0a..8805e349412f 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -723,13 +723,8 @@ 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.true
-
         expect(this.$divNoWidth).to.be.hidden
-        expect(this.$divNoWidth).to.be.visible
-
         cy.wrap(this.$divNoWidth).should('be.hidden')
-        cy.wrap(this.$divNoWidth).should('be.visible')
       })
 
       it('is hidden if parent has overflow: hidden and no width', function () {
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 66b3240b5fa5..c7dd3052a41f 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -21,10 +21,6 @@ let optionsObject = {
 const isVisible = (el) => {
   ensureEl(el, 'isVisible()')
 
-  if (isVisibilityVisible(el)) {
-    return false
-  }
-
   const optionIsVisible = checkIsOptionVisible(el)
 
   if (optionIsVisible === true) {
@@ -35,6 +31,10 @@ const isVisible = (el) => {
     return false
   }
 
+  if (isStrictlyNotVisibile(el)) {
+    return false
+  }
+
   return el.checkVisibility(optionsObject) && !isHiddenByAncestors(el)
 }
 
@@ -145,9 +145,18 @@ const isStrictlyHidden = (el, methodName = 'isStrictlyHidden()', options = { che
   return false
 }
 
-const isVisibilityVisible = (el) => {
+const isStrictlyNotVisibile = (el) => {
   const $el = $jquery.wrap(el)
 
+  if (elHasNoEffectiveWidthOrHeight($el)) {
+    // https://github.com/cypress-io/cypress/issues/6183
+    if (elHasDisplayInline($el)) {
+      return !elHasVisibleChild($el)
+    }
+
+    return true // not visible because element has no EffectiveWeightOrHeight
+  }
+
   if ($transform.detectVisibility($el) !== 'visible') {
     return true
   }

From 81491203b986b4ca5b65e5816b9d371b64a1983e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Fri, 28 Jun 2024 10:17:04 +0200
Subject: [PATCH 20/42] requires for new webkit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e3c73e74bdce..7ecc98ff4f44 100644
--- a/package.json
+++ b/package.json
@@ -186,7 +186,7 @@
     "mock-fs": "5.2.0",
     "p-defer": "^3.0.0",
     "patch-package": "6.4.7",
-    "playwright-webkit": "1.24.2",
+    "playwright-webkit": "1.45.0",
     "pluralize": "8.0.0",
     "print-arch": "1.0.0",
     "proxyquire": "2.1.3",

From 2f88b4819c3d3c2deeb652a1bc951c14b4d46efd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Fri, 28 Jun 2024 10:59:54 +0200
Subject: [PATCH 21/42] fix for older webkit versions

---
 package.json                          |  2 +-
 packages/driver/src/dom/visibility.ts | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 7ecc98ff4f44..e3c73e74bdce 100644
--- a/package.json
+++ b/package.json
@@ -186,7 +186,7 @@
     "mock-fs": "5.2.0",
     "p-defer": "^3.0.0",
     "patch-package": "6.4.7",
-    "playwright-webkit": "1.45.0",
+    "playwright-webkit": "1.24.2",
     "pluralize": "8.0.0",
     "print-arch": "1.0.0",
     "proxyquire": "2.1.3",
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index c7dd3052a41f..344f5eff7b3c 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import $jquery from './jquery'
 import $document from './document'
 import $elements from './elements'
@@ -31,6 +30,17 @@ const isVisible = (el) => {
     return false
   }
 
+  if (Cypress.browser.family === 'webkit') { //webkit before 17.3 not support checkVisibility
+    let webkitVer = Cypress.browser.version
+    let webKitMajorVersion = webkitVer.substring(0, webkitVer.indexOf('.'))
+    let webkitMinorVersion = webkitVer.slice(3)
+    let noOfWebkitVersion = parseInt(webKitMajorVersion)
+
+    if (noOfWebkitVersion < 17 && parseInt(webkitMinorVersion) < 3) {
+      return !isHidden(el, 'isVisible()')
+    }
+  }
+
   if (isStrictlyNotVisibile(el)) {
     return false
   }

From 6f5addfd1030228ab8892da74974eba9c9f67c30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Mon, 1 Jul 2024 13:05:13 +0200
Subject: [PATCH 22/42] probably only optimisation for visibility of ancestors

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

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 344f5eff7b3c..a4e1541861b5 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -45,7 +45,7 @@ const isVisible = (el) => {
     return false
   }
 
-  return el.checkVisibility(optionsObject) && !isHiddenByAncestors(el)
+  return el.checkVisibility(optionsObject) && !isNotVisibleBecauseOfAncestors(el)
 }
 
 const checkIsOptionVisible = (el) => {
@@ -173,6 +173,7 @@ const isStrictlyNotVisibile = (el) => {
 
   return false
 }
+
 const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityPropert: true,
   contentVisibilityAuto: true }) => {
   ensureEl(el, methodName)
@@ -193,6 +194,26 @@ const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options =
   return elIsOutOfBoundsOfAncestorsOverflow($el)
 }
 
+const isNotVisibleBecauseOfAncestors = (el, methodName = 'isNotVisibleBecauseOfAncestors()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityPropert: true,
+  contentVisibilityAuto: true }) => {
+  ensureEl(el, methodName)
+  const $el = $jquery.wrap(el)
+
+  // we do some calculations taking into account the parents
+  // to see if its hidden by a parent
+  if (elIsNotVisibleBecauseOfAncestors($el, options.checkOpacity)) {
+    return true // is hidden
+  }
+
+  if (elOrAncestorIsFixedOrSticky($el)) {
+    return elIsNotElementFromPoint($el)
+  }
+
+  // else check if el is outside the bounds
+  // of its ancestors overflow
+  return elIsOutOfBoundsOfAncestorsOverflow($el)
+}
+
 const elHasNoEffectiveWidthOrHeight = ($el) => {
   // Is the element's CSS width OR height, including any borders,
   // padding, and vertical scrollbars (if rendered) less than 0?
@@ -456,6 +477,32 @@ const elIsHiddenByAncestors = function ($el, checkOpacity, $origEl = $el) {
   return elIsHiddenByAncestors($parent, checkOpacity, $origEl)
 }
 
+const elIsNotVisibleBecauseOfAncestors = 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
+  // and its set overflow: hidden then our child element
+  // is effectively hidden
+  // -----UNLESS------
+  // the parent or a descendent has position: absolute|fixed
+  const $parent = getParent($el)
+
+  // stop if we've reached the body or html
+  // in case there is no body
+  // or if parent is the document which can
+  // happen if we already have an <html> element
+  if (isUndefinedOrHTMLBodyDoc($parent)) {
+    return false
+  }
+
+  if ($parent.get(0).checkVisibility(optionsObject) === false) {
+    return true
+  }
+
+  // continue to recursively walk up the chain until we reach body or html
+  return elIsNotVisibleBecauseOfAncestors($parent, checkOpacity, $origEl)
+}
+
 const parentHasNoOffsetWidthOrHeightAndOverflowHidden = function ($el) {
   // if we've walked all the way up to body or html then return false
   if (isUndefinedOrHTMLBodyDoc($el)) {

From 112ff5312642ffd857609bd573f9007640e80f1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 2 Jul 2024 10:37:37 +0200
Subject: [PATCH 23/42] webkit fixes and rework

---
 .../driver/cypress/e2e/dom/visibility.cy.ts   | 10 ++--
 packages/driver/src/dom/visibility.ts         | 50 +++++++++++--------
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index 8805e349412f..0a8071b5a1c1 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -335,7 +335,7 @@ describe('src/cypress/dom/visibility', () => {
 
       this.$parentPointerEventsNone = add(`\
 <div style="pointer-events: none">
-  <span style="position: fixed; left: 0; top: 50%;">parent pointer-events: none</span>
+  <span id="parentPointerEventsNone" style="position: fixed; left: 0; top: 50%;">parent pointer-events: none</span>
 </div>\
 `)
 
@@ -784,12 +784,12 @@ describe('src/cypress/dom/visibility', () => {
         expect(this.$parentPosAbs.find('span#parentPosAbs')).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
+      it('is visible if position: fixed and parent has pointer-events: none', { browser: '!webkit' }, function () {
+        expect(this.$parentPointerEventsNone.find('span#parentPointerEventsNone')).to.be.visible
       })
 
-      it('is not hidden if position: fixed and parent has pointer-events: none', function () {
-        expect(this.$parentPointerEventsNone.find('span')).to.not.be.hidden
+      it('is not hidden if position: fixed and parent has pointer-events: none', { browser: '!webkit' }, function () {
+        expect(this.$parentPointerEventsNone.find('span#parentPointerEventsNone')).to.not.be.hidden
       })
 
       it('is not visible if covered when position: fixed and parent has pointer-events: none', function () {
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index a4e1541861b5..5eefd08f0bb0 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -30,15 +30,8 @@ const isVisible = (el) => {
     return false
   }
 
-  if (Cypress.browser.family === 'webkit') { //webkit before 17.3 not support checkVisibility
-    let webkitVer = Cypress.browser.version
-    let webKitMajorVersion = webkitVer.substring(0, webkitVer.indexOf('.'))
-    let webkitMinorVersion = webkitVer.slice(3)
-    let noOfWebkitVersion = parseInt(webKitMajorVersion)
-
-    if (noOfWebkitVersion < 17 && parseInt(webkitMinorVersion) < 3) {
-      return !isHidden(el, 'isVisible()')
-    }
+  if (checkIfOldWebkit()) { //webkit before 17.3 not support checkVisibility
+    return !isHidden(el, 'isVisible()')
   }
 
   if (isStrictlyNotVisibile(el)) {
@@ -479,30 +472,45 @@ const elIsHiddenByAncestors = function ($el, checkOpacity, $origEl = $el) {
 
 const elIsNotVisibleBecauseOfAncestors = 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
-  // and its set overflow: hidden then our child element
-  // is effectively hidden
-  // -----UNLESS------
-  // the parent or a descendent has position: absolute|fixed
+  // if any parent has invisible no other checks are performed
+  // if it is visible we go above
   const $parent = getParent($el)
 
-  // stop if we've reached the body or html
-  // in case there is no body
-  // or if parent is the document which can
-  // happen if we already have an <html> element
   if (isUndefinedOrHTMLBodyDoc($parent)) {
     return false
   }
 
-  if ($parent.get(0).checkVisibility(optionsObject) === false) {
-    return true
+  if (checkIfOldWebkit()) { //webkit before 17.3 not support checkVisibility
+    if (elHasOpacityZero($parent) && checkOpacity) {
+      return true
+    }
+  } else {
+    if ($parent.get(0).checkVisibility(optionsObject) === false) {
+      return true
+    }
   }
 
   // continue to recursively walk up the chain until we reach body or html
   return elIsNotVisibleBecauseOfAncestors($parent, checkOpacity, $origEl)
 }
 
+const checkIfOldWebkit = () => {
+  if (Cypress.browser.family === 'webkit') { //webkit before 17.3 not support checkVisibility
+    let webkitVer = Cypress.browser.version
+    let webKitMajorVersion = webkitVer.substring(0, webkitVer.indexOf('.'))
+    let webkitMinorVersion = webkitVer.slice(3)
+    let noOfWebkitVersion = parseInt(webKitMajorVersion)
+
+    if (noOfWebkitVersion < 17 && parseInt(webkitMinorVersion) < 3) {
+      return true
+    }
+
+    return false
+  }
+
+  return false
+}
+
 const parentHasNoOffsetWidthOrHeightAndOverflowHidden = function ($el) {
   // if we've walked all the way up to body or html then return false
   if (isUndefinedOrHTMLBodyDoc($el)) {

From 917469fe791c3e9c5df6beaded67e353f42c599c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 2 Jul 2024 10:57:28 +0200
Subject: [PATCH 24/42] pipeline fix

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

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index ee3df921aa3b..1d1a51fcb53d 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.13.0
 
-_Released 7/02/2024 (PENDING)_
+_Released 07/02/2024 (PENDING)_
 
 **Performance:**
 

From 7cdbcf705dbfba38c99983abf70c72705f6f765c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 3 Jul 2024 08:27:30 +0200
Subject: [PATCH 25/42] another check, probably not needed.

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

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 5eefd08f0bb0..62c4d9759ce5 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -30,7 +30,7 @@ const isVisible = (el) => {
     return false
   }
 
-  if (checkIfOldWebkit()) { //webkit before 17.3 not support checkVisibility
+  if (checkIfOldWebkit()) {
     return !isHidden(el, 'isVisible()')
   }
 
@@ -38,7 +38,11 @@ const isVisible = (el) => {
     return false
   }
 
-  return el.checkVisibility(optionsObject) && !isNotVisibleBecauseOfAncestors(el)
+  if (!checkIfOldWebkit()) {
+    return el.checkVisibility(optionsObject) && !isNotVisibleBecauseOfAncestors(el)
+  }
+
+  return isHiddenByAncestors(el, 'isVisible', optionsObject)
 }
 
 const checkIsOptionVisible = (el) => {

From 25ccdc147cda1b0e01595ca6d5cd0a6074061bf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Mon, 8 Jul 2024 09:13:11 +0200
Subject: [PATCH 26/42] better check for browser support

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

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 62c4d9759ce5..4ba61b39ae48 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -30,7 +30,7 @@ const isVisible = (el) => {
     return false
   }
 
-  if (checkIfOldWebkit()) {
+  if (!(typeof el.checkVisibility === 'function')) {
     return !isHidden(el, 'isVisible()')
   }
 
@@ -38,7 +38,7 @@ const isVisible = (el) => {
     return false
   }
 
-  if (!checkIfOldWebkit()) {
+  if (typeof el.checkVisibility === 'function') {
     return el.checkVisibility(optionsObject) && !isNotVisibleBecauseOfAncestors(el)
   }
 
@@ -484,7 +484,7 @@ const elIsNotVisibleBecauseOfAncestors = function ($el, checkOpacity, $origEl =
     return false
   }
 
-  if (checkIfOldWebkit()) { //webkit before 17.3 not support checkVisibility
+  if (typeof $parent.get(0).checkVisibility !== 'function') {
     if (elHasOpacityZero($parent) && checkOpacity) {
       return true
     }
@@ -498,23 +498,6 @@ const elIsNotVisibleBecauseOfAncestors = function ($el, checkOpacity, $origEl =
   return elIsNotVisibleBecauseOfAncestors($parent, checkOpacity, $origEl)
 }
 
-const checkIfOldWebkit = () => {
-  if (Cypress.browser.family === 'webkit') { //webkit before 17.3 not support checkVisibility
-    let webkitVer = Cypress.browser.version
-    let webKitMajorVersion = webkitVer.substring(0, webkitVer.indexOf('.'))
-    let webkitMinorVersion = webkitVer.slice(3)
-    let noOfWebkitVersion = parseInt(webKitMajorVersion)
-
-    if (noOfWebkitVersion < 17 && parseInt(webkitMinorVersion) < 3) {
-      return true
-    }
-
-    return false
-  }
-
-  return false
-}
-
 const parentHasNoOffsetWidthOrHeightAndOverflowHidden = function ($el) {
   // if we've walked all the way up to body or html then return false
   if (isUndefinedOrHTMLBodyDoc($el)) {

From 9c6de7bb61d6783a74021ea68f300c36f93f40ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 9 Jul 2024 15:08:02 +0200
Subject: [PATCH 27/42] changelog for pipeline fix

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

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 8a71723306f9..a25201817085 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -6,6 +6,7 @@ _Released 7/16/2024 (PENDING)_
 **Bugfixes:**
 
 - Fixed an issue where the ReadStream used to upload a Test Replay recording could erroneously be re-used when retrying in cases of retryable upload failures. Fixes [#29227](https://github.com/cypress-io/cypress/issues/29227)
+- Change visibility check to use checkVisibility browser API. Fixed in [#29741](https://github.com/cypress-io/cypress/pull/29741).
 
 ## 13.13.0
 

From 01a7695d25513d8728331f667c65167556a4fed3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 10 Jul 2024 07:36:56 +0200
Subject: [PATCH 28/42] Update packages/driver/src/dom/visibility.ts

Co-authored-by: Jennifer Shehane <shehane.jennifer@gmail.com>
---
 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 4ba61b39ae48..8673699661ec 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -191,7 +191,7 @@ const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options =
   return elIsOutOfBoundsOfAncestorsOverflow($el)
 }
 
-const isNotVisibleBecauseOfAncestors = (el, methodName = 'isNotVisibleBecauseOfAncestors()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityPropert: true,
+const isNotVisibleBecauseOfAncestors = (el, methodName = 'isNotVisibleBecauseOfAncestors()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityProperty: true,
   contentVisibilityAuto: true }) => {
   ensureEl(el, methodName)
   const $el = $jquery.wrap(el)

From c63a04b08fa3bfe52b993c92279045b3531a95a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 10 Jul 2024 07:37:12 +0200
Subject: [PATCH 29/42] Update packages/driver/src/dom/visibility.ts

Co-authored-by: Jennifer Shehane <shehane.jennifer@gmail.com>
---
 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 8673699661ec..1ff6a71b3908 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -13,7 +13,7 @@ const { wrap } = $jquery
 let optionsObject = {
   checkOpacity: true,
   checkVisibilityCSS: true,
-  opacityPropert: true,
+  opacityProperty: true,
   contentVisibilityAuto: true,
 }
 

From 1e838078ab5c24226f7472d7706cee1391678003 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 10 Jul 2024 07:37:32 +0200
Subject: [PATCH 30/42] Update packages/driver/src/dom/visibility.ts

Co-authored-by: Jennifer Shehane <shehane.jennifer@gmail.com>
---
 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 1ff6a71b3908..d5e55cb009b3 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -171,7 +171,7 @@ const isStrictlyNotVisibile = (el) => {
   return false
 }
 
-const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityPropert: true,
+const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityProperty: true,
   contentVisibilityAuto: true }) => {
   ensureEl(el, methodName)
   const $el = $jquery.wrap(el)

From 4beb4ab5ea7b5a2e14d59242e3a18bafb418ebd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 10 Jul 2024 07:37:50 +0200
Subject: [PATCH 31/42] Update packages/driver/src/dom/visibility.ts

Co-authored-by: Jennifer Shehane <shehane.jennifer@gmail.com>
---
 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 d5e55cb009b3..6d1cbe74ce37 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -75,7 +75,7 @@ const checkIsOptionVisible = (el) => {
 // 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, checkVisibilityCSS: true, opacityPropert: true,
+const isHidden = (el, methodName = 'isHidden()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityProperty: true,
   contentVisibilityAuto: true }) => {
   if (isStrictlyHidden(el, methodName, options, isHidden)) {
     return true

From a7a4c5152b6cf455fca2f767e0b295bc04f278f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 10 Jul 2024 09:07:33 +0200
Subject: [PATCH 32/42] fix misspelled

---
 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 6d1cbe74ce37..0187b1fb3fd9 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -34,7 +34,7 @@ const isVisible = (el) => {
     return !isHidden(el, 'isVisible()')
   }
 
-  if (isStrictlyNotVisibile(el)) {
+  if (isStrictlyNotVisible(el)) {
     return false
   }
 
@@ -152,7 +152,7 @@ const isStrictlyHidden = (el, methodName = 'isStrictlyHidden()', options = { che
   return false
 }
 
-const isStrictlyNotVisibile = (el) => {
+const isStrictlyNotVisible = (el) => {
   const $el = $jquery.wrap(el)
 
   if (elHasNoEffectiveWidthOrHeight($el)) {

From 6720715c4880453eb525b9924edfb50dfcd005fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 10 Jul 2024 09:57:04 +0200
Subject: [PATCH 33/42] function simplification end test uncomment

---
 .../driver/cypress/e2e/dom/visibility.cy.ts   |  3 +-
 packages/driver/src/dom/visibility.ts         | 45 +++++++++----------
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index 0a8071b5a1c1..8a19f24bc14d 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -672,8 +672,7 @@ describe('src/cypress/dom/visibility', () => {
         cy.wrap(this.$optionHiddenInSelect.find('#hidden-opt')).should('not.be.visible')
       })
 
-      // TODO(webkit): fix+unskip
-      it('follows regular visibility logic if option outside of select', { browser: '!webkit' }, function () {
+      it('follows regular visibility logic if option outside of select', 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')
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 0187b1fb3fd9..b4841e46bd8b 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -20,14 +20,8 @@ let optionsObject = {
 const isVisible = (el) => {
   ensureEl(el, 'isVisible()')
 
-  const optionIsVisible = checkIsOptionVisible(el)
-
-  if (optionIsVisible === true) {
-    return true
-  }
-
-  if (optionIsVisible > 1) {
-    return false
+  if (checkIsOption(el) === true) {
+    return isOptionVisible(el)
   }
 
   if (!(typeof el.checkVisibility === 'function')) {
@@ -45,31 +39,34 @@ const isVisible = (el) => {
   return isHiddenByAncestors(el, 'isVisible', optionsObject)
 }
 
-const checkIsOptionVisible = (el) => {
+const checkIsOption = (el) => {
   // an option is considered visible if its parent select is visible
   if (isOption(el) || isOptgroup(el)) {
-    const $el = $jquery.wrap(el)
+    return true
+  }
 
-    if (elHasDisplayNone($el)) {
-      return 2
-    }
+  return false
+}
 
-    // if its parent select is visible, then it's not hidden
-    const $select = getFirstParentWithTagName($el, 'select')
+const isOptionVisible = (el: any) => {
+  const $el = $jquery.wrap(el)
 
-    if ($select && $select.length) {
-      // if the select is hidden, the options in it are not visible too
-      if (isStrictlyHidden($select)) {
-        return 2 //this signal not visible
-      }
-    }
+  if (elHasDisplayNone($el)) {
+    return false
+  }
+
+  // if its parent select is visible, then it's not hidden
+  const $select = getFirstParentWithTagName($el, 'select')
 
-    return true //this signal visible
+  if ($select && $select.length) {
+    // if the select is hidden, the options in it are not visible too
+    if (isStrictlyHidden($select)) {
+      return false
+    }
   }
 
-  return 0 //this signal not option element
+  return true
 }
-
 // TODO: we should prob update dom
 // to be passed in $utils as a dependency
 // because of circular references

From cbbbc67dcd8359fad0c8a0a7c3c99e228b7f82c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 10 Jul 2024 10:51:43 +0200
Subject: [PATCH 34/42] fix for backward compatibility with webkit

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

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index b4841e46bd8b..5137b5d54242 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -78,6 +78,10 @@ const isHidden = (el, methodName = 'isHidden()', options = { checkOpacity: true,
     return true
   }
 
+  if (Cypress.browser.family === 'webkit') {
+    return isHiddenByAncestors(el, methodName, { checkOpacity: true })
+  }
+
   return isHiddenByAncestors(el, methodName, options)
 }
 
@@ -168,8 +172,7 @@ const isStrictlyNotVisible = (el) => {
   return false
 }
 
-const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityProperty: true,
-  contentVisibilityAuto: true }) => {
+const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true }) => {
   ensureEl(el, methodName)
   const $el = $jquery.wrap(el)
 

From 230dcb249312c0a266feb268494a361de0e42224 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 10 Jul 2024 13:50:28 +0200
Subject: [PATCH 35/42] fix by separation of tests

---
 .../e2e/dom/visibility_css_position.cy.ts     | 203 ++++++++++++++++++
 packages/driver/src/dom/visibility.ts         |   4 -
 2 files changed, 203 insertions(+), 4 deletions(-)
 create mode 100644 packages/driver/cypress/e2e/dom/visibility_css_position.cy.ts

diff --git a/packages/driver/cypress/e2e/dom/visibility_css_position.cy.ts b/packages/driver/cypress/e2e/dom/visibility_css_position.cy.ts
new file mode 100644
index 000000000000..a1af5d451614
--- /dev/null
+++ b/packages/driver/cypress/e2e/dom/visibility_css_position.cy.ts
@@ -0,0 +1,203 @@
+// @ts-ignore
+const { $ } = Cypress
+
+describe('src/cypress/dom/visibility_css_position', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/generic.html')
+  })
+
+  context('hidden/visible overrides', () => {
+    beforeEach(function () {
+      const add = (el) => {
+        return $(el).appendTo(cy.$$('body'))
+      }
+
+      // ensure all tests run against a scrollable window
+      const scrollThisIntoView = add('<div style=`height: 1000px;` /><div>Should be in view</div>')
+
+      this.$optionInSelect = add(`\
+<select>
+  <option id='optionInSelect' >Naruto</option>
+</select>\
+`)
+
+      this.$parentOpacityZero = add(`\
+<div style="opacity: 0;">
+  <button>parent opacity: 0</button>
+</div>\
+`)
+
+      this.$parentNoWidthOnly = add(`\
+<div style='width: 0; height: 100px; overflow: hidden;'>
+  <div style='height: 500px; width: 500px;'>
+    <span id='parentNoWidthOnly'>parent width: 0</span>
+  </div>
+</div>`)
+
+      this.$parentNoHeight = add(`\
+<div style='width: 100px; height: 0px; overflow: hidden;'>
+  <span id='parentNoHeight'>parent height: 0</span>
+</div>`)
+
+      this.$parentNoWidthHeightOverflowAuto = add(`\
+<div style='width: 0; height: 0px; overflow: auto;'>
+  <span id='parentNoWidthHeightOverflowAuto'>parent no size, overflow: auto</span>
+</div>`)
+
+      this.$parentWithWidthHeightNoOverflow = add(`\
+<div style='width: 100px; height: 100px; overflow: hidden;'>
+  <div style='height: 100px; width: 100px;'>
+    <span>parent with size, overflow: hidden</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 id='parentPosAbs'>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 id="parentPointerEventsNone" style="position: fixed; left: 0; top: 50%;">parent pointer-events: none</span>
+</div>\
+`)
+
+      this.$parentPointerEventsNoneCovered = add(`\
+<div style="pointer-events: none;">
+  <span id="parentPointerEventsNoneCovered" 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>\
+`)
+
+      // 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 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')).to.not.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#parentPosAbs')).to.be.hidden
+        expect(this.$parentPosAbs.find('span#parentPosAbs')).to.not.be.visible
+      })
+
+      it('is visible if position: fixed and parent has pointer-events: none', function () {
+        expect(this.$parentPointerEventsNone.find('span#parentPointerEventsNone')).to.be.visible
+      })
+
+      it('is not hidden if position: fixed and parent has pointer-events: none', function () {
+        expect(this.$parentPointerEventsNone.find('span#parentPointerEventsNone')).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#parentPointerEventsNoneCovered')).to.be.hidden
+        expect(this.$parentPointerEventsNoneCovered.find('span#parentPointerEventsNoneCovered')).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')
+      })
+    })
+  })
+})
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 5137b5d54242..c4dfba03a13f 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -78,10 +78,6 @@ const isHidden = (el, methodName = 'isHidden()', options = { checkOpacity: true,
     return true
   }
 
-  if (Cypress.browser.family === 'webkit') {
-    return isHiddenByAncestors(el, methodName, { checkOpacity: true })
-  }
-
   return isHiddenByAncestors(el, methodName, options)
 }
 

From 2e88040690bea3a7cee1460220a8ccec905f2822 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 10 Jul 2024 13:51:15 +0200
Subject: [PATCH 36/42] removed parts related to visibility_css_position

---
 .../driver/cypress/e2e/dom/visibility.cy.ts   | 103 ------------------
 1 file changed, 103 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index 8a19f24bc14d..14d016a89a05 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -268,24 +268,6 @@ describe('src/cypress/dom/visibility', () => {
   </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;'>
@@ -320,30 +302,10 @@ describe('src/cypress/dom/visibility', () => {
 <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 id='parentPosAbs'>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 id="parentPointerEventsNone" style="position: fixed; left: 0; top: 50%;">parent pointer-events: none</span>
-</div>\
-`)
-
-      this.$parentPointerEventsNoneCovered = add(`\
-<div style="pointer-events: none;">
-  <span id="parentPointerEventsNoneCovered" 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(`\
@@ -742,71 +704,6 @@ describe('src/cypress/dom/visibility', () => {
       })
     })
 
-    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')).to.not.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#parentPosAbs')).to.be.hidden
-        expect(this.$parentPosAbs.find('span#parentPosAbs')).to.not.be.visible
-      })
-
-      it('is visible if position: fixed and parent has pointer-events: none', { browser: '!webkit' }, function () {
-        expect(this.$parentPointerEventsNone.find('span#parentPointerEventsNone')).to.be.visible
-      })
-
-      it('is not hidden if position: fixed and parent has pointer-events: none', { browser: '!webkit' }, function () {
-        expect(this.$parentPointerEventsNone.find('span#parentPointerEventsNone')).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#parentPointerEventsNoneCovered')).to.be.hidden
-        expect(this.$parentPointerEventsNoneCovered.find('span#parentPointerEventsNoneCovered')).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 () {

From 9fc2b8599c402530a2a8e1872b934a0db2bb6e3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Wed, 10 Jul 2024 14:26:40 +0200
Subject: [PATCH 37/42] cleanup unneded code

---
 .../e2e/dom/visibility_css_position.cy.ts        | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility_css_position.cy.ts b/packages/driver/cypress/e2e/dom/visibility_css_position.cy.ts
index a1af5d451614..607f0dbdd204 100644
--- a/packages/driver/cypress/e2e/dom/visibility_css_position.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility_css_position.cy.ts
@@ -34,16 +34,6 @@ describe('src/cypress/dom/visibility_css_position', () => {
   </div>
 </div>`)
 
-      this.$parentNoHeight = add(`\
-<div style='width: 100px; height: 0px; overflow: hidden;'>
-  <span id='parentNoHeight'>parent height: 0</span>
-</div>`)
-
-      this.$parentNoWidthHeightOverflowAuto = add(`\
-<div style='width: 0; height: 0px; overflow: auto;'>
-  <span id='parentNoWidthHeightOverflowAuto'>parent no size, overflow: auto</span>
-</div>`)
-
       this.$parentWithWidthHeightNoOverflow = add(`\
 <div style='width: 100px; height: 100px; overflow: hidden;'>
   <div style='height: 100px; width: 100px;'>
@@ -110,12 +100,6 @@ describe('src/cypress/dom/visibility_css_position', () => {
   </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 id="parentPointerEventsNone" style="position: fixed; left: 0; top: 50%;">parent pointer-events: none</span>

From baae2c880c07ccb4f2d0b1dc4b8caf65eb08c1dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Thu, 11 Jul 2024 11:43:33 +0200
Subject: [PATCH 38/42] fix for body and html with display none

---
 packages/driver/cypress/e2e/dom/visibility.cy.ts | 4 ++--
 packages/driver/src/dom/visibility.ts            | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index 14d016a89a05..f19a5cf8ab2a 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -528,10 +528,10 @@ describe('src/cypress/dom/visibility', () => {
         cy.$$('body').css('display', 'none')
 
         expect(cy.$$('html')).not.to.be.hidden
-        // expect(cy.$$('html')).to.be.visible
+        expect(cy.$$('html')).to.be.visible
 
         expect(cy.$$('body')).not.to.be.hidden
-        // expect(cy.$$('body')).to.be.visible
+        expect(cy.$$('body')).to.be.visible
       })
     })
 
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index c4dfba03a13f..b917d9ba41c3 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -28,6 +28,11 @@ const isVisible = (el) => {
     return !isHidden(el, 'isVisible()')
   }
 
+  // the body and html are always visible
+  if (isBody(el) || isHTML(el)) {
+    return true // is visible
+  }
+
   if (isStrictlyNotVisible(el)) {
     return false
   }

From b55b2d0c2d1c26085734999b59fcc9b30d3154a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Thu, 11 Jul 2024 12:04:08 +0200
Subject: [PATCH 39/42] add is not visible test for offset 0

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

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index f19a5cf8ab2a..1acb7626e900 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -688,6 +688,12 @@ describe('src/cypress/dom/visibility', () => {
         cy.wrap(this.$divNoWidth).should('be.hidden')
       })
 
+      it('is not visible if offsetWidth is 0', function () {
+        expect(this.$divNoWidth.is(':visible')).to.be.false
+        expect(this.$divNoWidth).to.not.be.visible
+        cy.wrap(this.$divNoWidth).should('not.be.visible')
+      })
+
       it('is hidden if parent has overflow: hidden and no width', function () {
         expect(this.$parentNoWidthOnly.find('span#parentNoWidthOnly')).to.be.hidden
         expect(this.$parentNoWidthOnly.find('span#parentNoWidthOnly')).to.not.be.visible

From e705a327a871c2e28b03eeb7eb57612b4e02e9e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Mon, 30 Sep 2024 11:13:33 +0200
Subject: [PATCH 40/42] merge changelog

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

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index e29306acce45..2fa3e74eb669 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,12 +1,14 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
-## 14.01.1
+## 16.01.1
 
-_Released 10/02/2024 (PENDING)_
+_Released 10/31/2024 (PENDING)_
 
 **Bugfixes:**
 
 - Change visibility check to use checkVisibility browser API. Fixed in [#29741](https://github.com/cypress-io/cypress/pull/29741).
 
+## 13.15.0
+
 _Released 9/25/2024_
 
 **Features:**

From a458041885640db1a17fc812b9e0f023d802eecc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Mon, 30 Sep 2024 11:18:03 +0200
Subject: [PATCH 41/42] remove unnecessery changelog changes.

---
 cli/CHANGELOG.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 2fa3e74eb669..4c5d8b272610 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -126,7 +126,6 @@ _Released 7/16/2024_
 
 - Fixed an issue where unhandled `WebSocket connection closed` exceptions would be thrown when CDP connections rapidly connect, disconnect, and connect again while there are pending commands. Fixes [#29572](https://github.com/cypress-io/cypress/issues/29572).
 - CLI output properly displays non-JSON response bodies when a Test Replay upload attempt returns a non-JSON response body for a non-200 status code. Addressed in [#29801](https://github.com/cypress-io/cypress/pull/29801).
-
 - Fixed an issue where the ReadStream used to upload a Test Replay recording could erroneously be re-used when retrying in cases of retryable upload failures. Fixes [#29227](https://github.com/cypress-io/cypress/issues/29227).
 - Fixed an issue where command snapshots were not being captured within the `cy.origin()` command within Test Replay. Addressed in [#29828](https://github.com/cypress-io/cypress/pull/29828).
 
@@ -138,7 +137,7 @@ _Released 7/16/2024_
 
 ## 13.13.0
 
-_Released 07/02/2024
+_Released 7/01/2024_
 
 **Performance:**
 
@@ -150,7 +149,6 @@ _Released 07/02/2024
 
 **Bugfixes:**
 
-- Change visibility check to use checkVisibility browser API. Fixed in [#29741](https://github.com/cypress-io/cypress/pull/29741).
 - 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).
 

From 31e12940621ee2f95d31c008aef0f312241fbf42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Urbanek?= <urbanekmike@gmail.com>
Date: Tue, 1 Oct 2024 07:17:28 +0200
Subject: [PATCH 42/42] added breaking changes section and bugfix for pipeline

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

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index cadd09c43a22..d41a24f9abfb 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -5,6 +5,10 @@ _Released 12/3/2024 (PENDING)_
 
 **Breaking Changes:**
 
+- Visibility checks are no longer inverse of element 'is.hidden' checks. Element now can be visible, but still not interactable. Use 'is.hidden' to make sure element can be used.
+
+**Bugfixes:**
+
 - Change visibility check to use checkVisibility browser API. Fixed in [#29741](https://github.com/cypress-io/cypress/pull/29741).
 
 ## 13.15.1