diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 06bad21ac65d..e17d325415bb 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -5,6 +5,11 @@ _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). Fixes [#28187](https://github.com/cypress-io/cypress/issues/28187).
 - Removed support for Node.js 16 and Node.js 21. Addresses [#29930](https://github.com/cypress-io/cypress/issues/29930).
 - Prebuilt binaries for Linux are no longer compatible with Linux distributions based on glibc <2.28, for example: Ubuntu 14-18, RHEL 7, CentOS 7, Amazon Linux 2. Addresses [#29601](https://github.com/cypress-io/cypress/issues/29601).
 - Cypress now only officially supports the latest 3 major versions of Chrome, Firefox, and Edge - older browser versions may still work, but we recommend keeping your browsers up to date to ensure compatibility with Cypress. A warning will no longer be displayed on browser selection in the Launchpad for any 'unsupported' browser versions. Additionally, the undocumented `minSupportedVersion` property has been removed from `Cypress.browser`. Addressed in [#30462](https://github.com/cypress-io/cypress/pull/30462).
@@ -1184,4 +1189,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
diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index fe82cfb0bd02..2c72fa2095f3 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><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,19 +244,19 @@ describe('src/cypress/dom/visibility', () => {
 </table>\
 `)
 
-      this.$parentNoWidth = add(`\
+      this.$parentNoWidthOnly = add(`\
 <div style='width: 0; height: 100px; overflow: hidden;'>
     <span>parent width: 0</span>
 </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(`\
@@ -335,30 +335,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>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 style="position: fixed; left: 0; top: 50%;">parent pointer-events: none</span>
-</div>\
-`)
-
-      this.$parentPointerEventsNoneCovered = add(`\
-<div style="pointer-events: none;">
-  <span 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(`\
@@ -644,14 +624,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 () {
@@ -687,8 +667,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')
@@ -738,23 +717,24 @@ 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).to.be.hidden
-        expect(this.$divNoWidth).to.not.be.visible
-
         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.$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 hidden if ancestor has overflow:hidden and no width', function () {
@@ -778,68 +758,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')).not.to.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')).to.be.hidden
-        expect(this.$parentPosAbs.find('span')).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
-        expect(this.$parentPointerEventsNone.find('span')).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')).to.be.hidden
-        expect(this.$parentPointerEventsNoneCovered.find('span')).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 () {
@@ -850,8 +768,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.not.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 () {
@@ -1144,7 +1062,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 () {
@@ -1172,7 +1090,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 () {
@@ -1180,7 +1098,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/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..607f0dbdd204
--- /dev/null
+++ b/packages/driver/cypress/e2e/dom/visibility_css_position.cy.ts
@@ -0,0 +1,187 @@
+// @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.$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.$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/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 895016f3c1de..3110c4dcfa88 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'
@@ -10,19 +9,76 @@ const { isElement, isBody, isHTML, isOption, isOptgroup, getParent, getFirstPare
 const fixedOrAbsoluteRe = /(fixed|absolute)/
 
 const OVERFLOW_PROPS = ['hidden', 'scroll', 'auto']
+const { wrap } = $jquery
+let optionsObject = {
+  checkOpacity: true,
+  checkVisibilityCSS: true,
+  opacityProperty: true,
+  contentVisibilityAuto: true,
+}
 
 const isVisible = (el) => {
-  return !isHidden(el, 'isVisible()')
+  ensureEl(el, 'isVisible()')
+
+  if (checkIsOption(el) === true) {
+    return isOptionVisible(el)
+  }
+
+  if (!(typeof el.checkVisibility === 'function')) {
+    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
+  }
+
+  if (typeof el.checkVisibility === 'function') {
+    return el.checkVisibility(optionsObject) && !isNotVisibleBecauseOfAncestors(el)
+  }
+
+  return isHiddenByAncestors(el, 'isVisible', optionsObject)
 }
 
-const { wrap } = $jquery
+const checkIsOption = (el) => {
+  // an option is considered visible if its parent select is visible
+  if (isOption(el) || isOptgroup(el)) {
+    return true
+  }
+
+  return false
+}
+
+const isOptionVisible = (el: any) => {
+  const $el = $jquery.wrap(el)
+
+  if (elHasDisplayNone($el)) {
+    return false
+  }
+
+  // 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 (isStrictlyHidden($select)) {
+      return false
+    }
+  }
 
+  return true
+}
 // 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, opacityProperty: true,
+  contentVisibilityAuto: true }) => {
   if (isStrictlyHidden(el, methodName, options, isHidden)) {
     return true
   }
@@ -98,6 +154,25 @@ const isStrictlyHidden = (el, methodName = 'isStrictlyHidden()', options = { che
   return false
 }
 
+const isStrictlyNotVisible = (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
+  }
+
+  return false
+}
+
 const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true }) => {
   ensureEl(el, methodName)
   const $el = $jquery.wrap(el)
@@ -117,6 +192,26 @@ const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options =
   return elIsOutOfBoundsOfAncestorsOverflow($el)
 }
 
+const isNotVisibleBecauseOfAncestors = (el, methodName = 'isNotVisibleBecauseOfAncestors()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityProperty: 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?
@@ -405,6 +500,30 @@ 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 invisible no other checks are performed
+  // if it is visible we go above
+  const $parent = getParent($el)
+
+  if (isUndefinedOrHTMLBodyDoc($parent)) {
+    return false
+  }
+
+  if (typeof $parent.get(0).checkVisibility !== 'function') {
+    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 parentHasNoClientWidthOrHeightAndOverflowHidden = function ($el: JQuery<HTMLElement>) {
   // if we've walked all the way up to body or html then return false
   if (isUndefinedOrHTMLBodyDoc($el)) {