The Guess Who pictures should be contained in the tiles - codepen.io - design is broken

[kbrosnan]

URL: https://codepen.io/ruidovisual/pen/KoRgGR

Browser / Version: Firefox 68.0
Operating System: Windows 10
Tested Another Browser: Yes

Problem type: Design is broken
Description: The Guess Who pictures should be contained in the tiles
Steps to Reproduce:
Visit page

• The tiles have odd angles
• Poor gradient behind the board

Works fine in Edge 18 (EdgeHTML)

Browser Configuration

• None

From webcompat.com with ❤️

[karlcow]

From left to right: Firefox Nightly, Safari Tech Preview, Chrome Canary

[kbrosnan]

Maybe then it is a Windows Graphics issue?

[kbrosnan]

Filed 1551736. For screenshots producing a busted result. Checking to see if WebRender affects the bug as reported.

[karlcow]

I don't think it's windows only because the screenshots I made are on macos and the issue is visible.

[karlcow]

but indeed your screenshot is even weirder than the mac one.

[denschub]

Okay, there is a lot going on in this bug.

The outer element, <form class="board"> has

transform: rotateX(30deg) translateX(10px);
transform-style: preserve-3d;

the element that's supposed to "stand up", <label class="card"> has

transform-origin: bottom left;
transform: rotateX(-45deg);

and something is fishy here. If we move the card up a few levels so that it is a direct child of the form, the card stands up correctly. As soon as there are other elements, the transform-style seems to no longer be in effect, which is odd. As a quick verification for my theory, we can add

.slots, .slot {
  transform-style: preserve-3d;
}

and yes indeed, the cards "stand up" now.

After a bit of digging, it turns out we already have a bug for that, but it may not be so simple. Firefox is passing a WPT here, but it seems like that test actually may be contradicting what the spec says, so that's fun.

More details and follow-up discussion links are available in bug 1362543. I have the strong feeling that this eventually results in a change inside Firefox, and since this is a report about a lab-example anyway, let's just go ahead and close this report as a duplicate of said Firefox issue.

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.