Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'visible' assertion says visible for elements cropped by parent element with overflow: hidden #4161

mvasin opened this issue May 8, 2019 · 5 comments


Copy link

@mvasin mvasin commented May 8, 2019

Current behavior:

Cypress claims an element is visible, while it's completely cropped by parent overflow: hidden container element.

Here's html:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    .container {
      display: flex;
      overflow: hidden;
    div {
      flex: 0 0 80%;

    [data-cy=red] {
      background-color: red;

    [data-cy=green] {
      background-color: green;

    [data-cy=blue] {
      background-color: blue;
  <div class="container">
    <div data-cy="red">red</div>
    <div data-cy="green">green</div>
    <div data-cy="blue">blue</div>

Here's the test:

/// <reference types="Cypress" />

describe('Smoke test', () => {
  it('отображает футер', () => {

All three divs, red, green and blue are 80% of the parent, parent div is overflow: hidden, there is no way for a user to scroll to blue div:
Screenshot from 2019-05-08 16-32-54

But Cypress somehow scrolls to that div and thinks it's visible:
Screenshot from 2019-05-08 16-33-11

Desired behavior:

Above code should be enough, but just in case, here's the reproduction repo:


Cypress 3.2.0, Ubuntu 18.04.2 LTS, Electron 59 or Chrome 74

Copy link

@speir-wang speir-wang commented May 13, 2019

I am having the same issue. In my case, the react-select dropdown menu is being cropped from the view, technically speaking, we can see part of the dropdown, but the shoud(be.visible) is not happy with it :(

@jennifer-shehane jennifer-shehane changed the title 'visible' assertion doesn't work as expected for elements cropped by parent element 'visible' assertion says visible for elements cropped by parent element with overflow: hidden May 14, 2019

This comment has been hidden.

Copy link

@jennifer-shehane jennifer-shehane commented Jun 10, 2019

What is additionally weird is that when you go to hover to see the snapshot, the blue div does appear in the snapshot.

Screen Shot 2019-06-10 at 3 06 49 PM

I've written a failing test for this within #4421

Copy link

@cypress-bot cypress-bot bot commented Jun 19, 2019

The code for this is done in cypress-io/cypress#4421, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

jennifer-shehane added a commit that referenced this issue Jun 19, 2019
* Add failing test case for visible element within overflow hidden then position absolute element.

Addresses #4395

* Write failing test case for when parent is flex and overflow hidden with el outside bounds

Addresses #4161

* Wrote failing test for visibility outside of clip-path

Addresses #1178

* Add failing tests for transform scale

Addresses #723

* Add failing test for backfact-visibility hidden example

* cs -> js fixes

* Add more specific error when el is not element

* Always return as visible when checking html or body

* Add comments + rename methods to be more exact

* Add case for isHidden when visibility is collapse

* Add failing test cases for visibility issues

* Add comment about how ensureVisibility works under the hood

* Add checks and tests for opacity: 0 to be hidden

* Simplify if/case statements to be more readable

* Expand check for offset parents to also check children of ancestor for positioning attributes

close #4395
close #755

* Fix issue where els with parents with absolute position inside overflow hidden would be calculated as not visible

* comment out opacity checks for patch release

* Add more tests around new visibility assertions

- Add case to make sure display none is not on the option or optgroup

* Fix failing assertion - where el was undefined when looking for visibiliyt

* remove commented out code involving opacity 😬
Copy link

@cypress-bot cypress-bot bot commented Jun 27, 2019

Released in 3.3.2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

3 participants