Element hidden cause of backface visibility is considered visible

[DatrixCompany]

Current behavior:

Element with backface-visibility: hidden which is rotated by 180deg is still considered visible, and not hidden.

Desired behavior:

When the element is rotated (and hence not visible), the assertion el.should('be.hidden') should pass.

Steps to reproduce: (app code and test code)

• Create a div that holds 2 inner divs with different text in each one
• Add the property backface-visibility: hidden to both divs.
• Add the property transform: rotateY(180deg) to the second div.
• In the test, select the second inner div (the rotated one) and assert that it is hidden (el.should('be.hidden').

Versions

Cypress: 3.3.0
Windows 10
Chrome: 74.0.3729.157 64bit

Code example

HTML:

<div class="wrapper">
  <div class="innerDiv"><p>FRONT</p></div>
  <div class="innerDiv"><p>BACK</p></div>
</div>

CSS:

.wrapper {
  position: relative;
}

.innerDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
}

.innerDiv.second {
  transform: translate(-50%, -50%) rotateY(180deg);
}

.wrapper:hover .innerDiv.first {
  transform: translate(-50%, -50%) rotateY(180deg);
}

.wrapper:hover .innerDiv.second {
  transform: translate(-50%, -50%) rotateY(0);
}

[jennifer-shehane]

Duplicate of #2985