Open ngnijland opened 1 year ago
I was able to reproduce with an example from MDN.
backface-visibility: visible; |
backface-visibility: hidden; |
---|---|
1
2
3
4
5
6
Since all faces are partially transparent, the back faces (2, 4, 5) are visible through the front faces (1, 3, 6). |
The three back faces (2, 4, 5) are hidden. |
having same with 1.32.1, but not with 1.31.1 ( which is strange )
comparing screenshots with this property in reset.css makes some elements to look "transparent"
-webkit-backface-visibility: hidden;
Looks like the problem has to do with CSS perspective property which is not respected on the screenshots:
perspective: 550px;
perspective-origin: 150% 150%;
Turns out this is an upstream issue: https://bugs.webkit.org/show_bug.cgi?id=207266
@yury-s now we just wait for webkit devs ? :(
Another related upstream bug: https://bugs.webkit.org/show_bug.cgi?id=242215
System info
mcr.microsoft.com/playwright:v1.30.0-focal
Source code
HTML and CSS is to sketch the situation. The screen recordings should give more context to the issue.
The above HTML and CSS (among other code) result in the following interface: https://user-images.githubusercontent.com/4727742/224694220-047a0a1a-0ed4-4315-865e-e4f8480027b2.mov
Config file
Test file (self-contained)
Steps
--update-snapshots
flagExpected
Front of the card should be visible.
Actual
Back of the card is visible mirrored.
NOTE: The behavior of seeing the back of the card mirrored is the same as when you remove
backface-visibility: hidden;
css property from the.card-face
class.Video of the actual behavior:
https://user-images.githubusercontent.com/4727742/224695831-17ccd2f3-ee0e-4c77-85af-0fdc183595e3.mov