Incorrect "CSS property: 'position: fixed'" error for elements that don't have position: fixed at all

[TheDutchCoder]

Current behavior:

Currently one of my tests (which is identical to a previous test in this regard) fails on an error that is simply incorrect.
It's showing:

CypressError: Timed out retrying: expected 'button.btn--secondary.w-full.sm:w-auto.md:mx-1.md:w-auto.md:w-1/3.lg:w-1/4.xl:w-1/5.btn' to be 'visible'` with `This element 'button.btn--secondary.w-full.sm:w-auto.md:mx-1.md:w-auto.md:w-1/3.lg:w-1/4.xl:w-1/5.btn' is not visible because it has CSS property: 'position: fixed' and its being covered by another element:

which isn't at all true.

I don't have fixed positioned buttons at all, so this error is completely incorrect.

The stacktrace also shows "undefined" which is curious at best:

undefined at Object.cypressErr (http://local.canvaspop.com/__cypress/runner/cypress_runner.js:85348:11) at Object.throwErr (http://local.canvaspop.com/__cypress/runner/cypress_runner.js:85303:18) at Object.throwErrByPath (http://local.canvaspop.com/__cypress/runner/cypress_runner.js:85335:17) at retry (http://local.canvaspop.com/__cypress/runner/cypress_runner.js:77321:16) at onFailFn (http://local.canvaspop.com/__cypress/runner/cypress_runner.js:68422:16) at tryCatcher (http://local.canvaspop.com/__cypress/runner/cypress_runner.js:118962:23) at Promise._settlePromiseFromHandler (http://local.canvaspop.com/__cypress/runner/cypress_runner.js:116898:31) at Promise._settlePromise (http://local.canvaspop.com/__cypress/runner/cypress_runner.js:116955:18) at Promise._settlePromise0 (http://local.canvaspop.com/__cypress/runner/cypress_runner.js:117000:10) at Promise._settlePromises (http://local.canvaspop.com/__cypress/runner/cypress_runner.js:117075:18) at Async../node_modules/bluebird/js/release/async.js.Async._drainQueue (http://local.canvaspop.com/__cypress/runner/cypress_runner.js:113687:16) at Async../node_modules/bluebird/js/release/async.js.Async._drainQueues (http://local.canvaspop.com/__cypress/runner/cypress_runner.js:113697:10) at Async.drainQueues (http://local.canvaspop.com/__cypress/runner/cypress_runner.js:113571:14) at

Desired behavior:

My test to pass, like it does locally (same version, same browser).

Test code to reproduce

Versions

3.4.1
Electron 61
Docker (Alpine)

[TheDutchCoder]

This issue might actually be what's going on (though my parent doesn't overlay the button at all, it's not even a direct parent)
#6675

[TheDutchCoder]

It gets even worse. Locally it now randomly fails with cypress run as well, but not with cypress open and the manually running it.

They use the exact same config...

[TheDutchCoder]

More information.

Locally this issue only triggers when the Cypress window is not in the foreground.
As soon as I switch to e.g. my regular browser and come back to Cypress after a while, the error will pop up.

[jennifer-shehane]

I see that you are using a very old version of Cypress. Please update to the current version of Cypress and let us know if this is still happening for you. Your issue may have already been fixed. Thanks!

[TheDutchCoder]

Unfortunately I'm stuck at this version because of Alpine.

I'll look and see if we can get a more recent docker image to run, but I doubt it.

[TheDutchCoder]

Okay I was able to update everything to the latest version and I still have the issue.

I think I'm closing in on the issue and it might be a rendering bug in headless Electron with z-index stacking.

I'll try to illustrate what happens:

Element 1 and 2 are siblings

Element 1 has relative position and z-index 10, and pointer events none
Element 2 has fixed position and z-index 30, and is transformed off the screen (translateX(-100%))

The Button to be clicked is inside Element 2

Waiting for Button to.be.visible probably yields true directly when Element 2 starts transitioning into view, but it "blocked" by Element 1.

Even though Element 1 is underneath Element 2 in the stacking order, somehow Electron renders Element 1 on top of Element 2, preventing clicks on Button

[TheDutchCoder]

Alright, after a long, long session with Jess to track down the issue, we were able to get relatively close to the issue(s) and it seems to be a combination of:

1. GPU being disabled while running the tests on Buildkite, yielding a different rendering (probably)
2. .should('be.visible') to not sufficiently support z-index and probably return false negatives on the clickability of an element

.click({ force: true }) circumvented my problem, but it's not a real solution.

There's a layer with disabled pointer events underneath the fixed element with the button and that seems to return a false negative.

[aswinijayaraman]

Do we have a solution to it?

[scorpyto]

The issue still exists in the last version of Cypress v12.5.1 and Chrome v109. scrollIntoView, click, realClick all with {force : true} are not working.

[scorpyto]

Is there a way to remove the CSS property of the element position: fixed by force in the code?

[nagash77]

@scorpyto are you able to provide a reproducible example repo?

[scorpyto]

@nagash77 Unfortunately I am not able to provide example as I am working with sensitive data and to create a new repo with mock data will take some time. While the element itself doesn't have "position: fixed" it is more like a global style setting in the html.
<style data-jss="" data-meta="makeStyles"> .jss51 { color: #fafafa; height: 64px; padding: 0; overflow: hidden; background: linear-gradient(45deg, #c31361 25%, #980f57 85%); box-shadow: 0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 16px 1px rgba(0,0,0,0.16),0px 4px 18px 3px rgba(0,0,0,0.12); } .jss52 { width: 260px; flex-shrink: 0; } .jss53 { width: 260px; transition: width 225ms cubic-bezier(0.4, 0, 0.6, 1) 0ms; } @media (max-width:599.95px) { .jss53 { z-index: 9999; position: fixed; } } ...............

I've tried something like:

cy.xpath("//div//label[contains(text(), 'Some Element')]").invoke('attr', 'style', 'position: relative')

And it somehow seems to work or it is just a coincidence... In Cypress GUI I see the invoke command as "invoke .attr()" without the changed position.

[nagash77]

Hi @scorpyto right now there doesn't seem to be enough information to reproduce the problem on our end. We'll have to close this issue until we can reproduce it. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

You may also want to check out our community chat, it can be helpful for debugging issues or just answering questions you have about Cypress. Someone there may be able to help you debug further or create a reproducible example that will allow us to revisit this issue.

I am going to close this issue for now as we don't have a path forward but if you are able to provide a reproducible example in the future please do comment back here and we can reopen this issue.