Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
jennifer-shehanecommented, Dec 6, 2019

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

index.html

<!DOCTYPE html>
<html>
<body>
  <style type="text/css">
    .container {
      position: relative;
      transform-style: preserve-3d; /* This breaks visible check */
      width: 200px;
      height: 300px;
    }

    .flipped {
      transform: rotateY(180deg);
    }

    .face {
      backface-visibility: hidden;
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .front {
      background: blue;
    }

    .back {
      transform: rotateY(180deg);
      background: red;
    }
  </style>

  <div class="container">
    <div class="face front">
      Front
    </div>
    <div class="face back">
      Back
    </div>
  </div>
  
  <script>
    const container = document.querySelector('.container');
    container.addEventListener('click', () => {
      container.classList.toggle('flipped');
    })
  </script>
</body>
</html>

Failing spec.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

0reactions
cypress-bot[bot]commented, Jan 10, 2020

Released in 3.8.2.

This comment thread has been locked. If you are still experiencing this issue after upgrading to Cypress v3.8.2, please open a new issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

backface visibility not working in safari - Stack Overflow
I think the issue here is with the backface-visibility: hidden;. It's not being supported in ios and in safari. In your code just...
Read more >
backface-visibility - CSS: Cascading Style Sheets | MDN
The backface-visibility CSS property sets whether the back face of an element is visible when turned towards the user.
Read more >
backface-visibility | CSS-Tricks
The backface-visibility property relates to 3D transforms. With 3D transforms, you can manage to rotate an element so what we think of as ......
Read more >
CSS3 backface-visibility Property - Tutorial Republic
The backface-visibility CSS property determines whether or not the "back" side of a transformed element is visible when facing the user.
Read more >
The backface-visibility property is not working. - Treehouse
.side-a, .side-b { backface-visibility: hidden; } ... You'll have to add property transform-style: preserve-3d to .side-a, side-b.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

WebSocket is not open: readyState 3 (CLOSED) error when watching test files

Next page

Cypress config files should support "extends" option