Cypress: backface-visibility: hidden with transform-style: preserve-3d fails the "is.visible" test

Created on 13 Nov 2019 · 5Comments · Source: cypress-io/cypress

Current behavior:

Currently an element with backface-visibility: hidden; transform: rotateY(180deg); that is inside a parent with transform-style: preserve-3d; transform: rotateY(180deg) will fail the is.visible assertion

The same problem mentioned in #2985 was marked as fixed by https://github.com/cypress-io/cypress/pull/5591 i only think the case where the parent has the css property transform-style: preserve-3d; was forgotten

Desired behavior:

it should not fail the is.visible assertion

Steps to reproduce: (app code and test code)

app code
https://codepen.io/loekup/pen/rNNZqZW

test code

describe('backface-visibility: hidden; test', function () {
    it('should flip and validate the visibility of the card faces', function () {
        cy.visit('index.html')
        cy.get('.front').should('be.visible');
        cy.get('.back').should('not.be.visible');
        cy.get('.container').click();
        cy.get('.front').should('not.be.visible');
        cy.get('.back').should('be.visible');
    });
});

Versions

3.6.1.

internal-priority pkdriver visibility 👁 bug

Source

loekup

Most helpful comment

Hey @loekup, yes this indeed is not being calculated correctly in Cypress 3.7.0.

index.html

```index.html

Front

Back


Failing `spec.js`

```js
it('should flip and validate the visibility of the card faces', () => {
  cy.visit('index.html')
  cy.get('.front').should('be.visible')
  cy.get('.back').should('not.be.visible')
  cy.get('.container').click()
  cy.get('.front').should('not.be.visible')
  cy.get('.back').should('be.visible')
})

The fix would require some similar logic as was written in https://github.com/cypress-io/cypress/pull/5591/files including tests. cc @sainthkh

jennifer-shehane on 6 Dec 2019

👍2

All 5 comments

Hey guys, any update on this? would it be possible for you guys to confirm that this is an issue ?

loekup on 19 Nov 2019

Hey @loekup, yes this indeed is not being calculated correctly in Cypress 3.7.0.

index.html

```index.html

Front

Back


Failing `spec.js`

```js
it('should flip and validate the visibility of the card faces', () => {
  cy.visit('index.html')
  cy.get('.front').should('be.visible')
  cy.get('.back').should('not.be.visible')
  cy.get('.container').click()
  cy.get('.front').should('not.be.visible')
  cy.get('.back').should('be.visible')
})

The fix would require some similar logic as was written in https://github.com/cypress-io/cypress/pull/5591/files including tests. cc @sainthkh

jennifer-shehane on 6 Dec 2019

👍2

@jennifer-shehane

This requires a little more complicated matrix calculation. I'm thinking about the edge cases and solution.

sainthkh on 6 Dec 2019

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