The Deep Card Conundrum

There are some issues in Firefox due to backface-visibility: hidden being inadequately specified, and different browsers implementing it differently. https://bugzilla.mozilla.org/show_bug.cgi?id=1655224 looks like a decent place to start if interested in learning more.

The first card example has an image on the back face that isn’t hidden when it’s behind. Two solutions for that are:

1. .card-back { overflow: hidden }
2. .card-back-image { backface-visibility: hidden; }

Actually, with .card-container * { transform-style: preserve-3d; } already in place, it should probably just be “add backface-visibility: hidden to that”, plus shifting the border from .card to .card-content, .card-back so it doesn’t get lost from the back.

---

I suspect the technique won’t work well on Safari: trying it under Epiphany, which I’ve found to be a good proxy for Safari problems, in some mouse positions the card contents just vanish. I find a pretty big hole (whose exact contours I have not explored, but they’re not entirely symmetrical) around pointing at the apex of the house, and another smaller one at the point of the third paling from the left. I haven’t tried calculating the trigonometry to see if degenerate calculations could explain it, but none of that is an issue in Firefox or Chromium.

I’m sure it’s a cool effect on a desktop, but it doesn’t work on touch devices since it tracks mouse movement. I couldn’t get the examples to show any movement on my iPad.