backface-visibility: hidden not working in grid on Safari - css

Question

I'm very close to having solved this problem, by nesting a 1:1 grid instead of using flex and position: absolute; however, while it seems to really, really work on Chrome and Firefox, on Safari my backface is visible:
Super curiously, in dark mode, it appears to briefly work properly, before the backside takes over:
How do I make it so that my "flipped" card only shows the correct content? Can I Use seems to think backface-visibility has been supported in Safari ~ forever. Is this a new bug? Am I doing something wrong?
(FYI, I'm using Safari 16.0)
Fiddle:
.flip {
perspective: 600;
display: flex;
}
.flip-content {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-template-rows: repeat(1, minmax(0, 1fr));
margin-left: auto;
margin-right: auto;
transition: 0.4s;
transform-style: preserve-3d;
width: 100%;
}
.flip:hover .flip-content {
transform: rotateY(180deg);
transition: transform 0.3s;
}
.flip-front,
.flip-back {
backface-visibility: hidden;
grid-column-start: 1;
grid-row-start: 1;
margin-left: auto;
margin-right: auto;
max-width: 24rem;
overflow: hidden;
width: 100%;
}
.flip-back {
transform: rotateY(180deg);
}
#media (prefers-color-scheme: dark) {
.flip-front,
.flip-back {
background-color: rgb(30, 41, 59);
color: rgb(226, 232, 240);
}
}
.container {
width: 450px;
}
<div class="container">
<div class="flip">
<div class="flip-content">
<div class="flip-front">
<h2>Step 1:<br>Lorem ipsum dolor sit amet</h2>
</div>
<div class="flip-back">
<p>Maecenas justo purus, semper id feugiat in, ornare vel urna. Pellentesque maximus tortor metus, eu posuere velit ullamcorper sit amet.</p>
</div>
</div>
</div>
</div>

Answer 1

I ran into a similar issue on Safari, and the janky workaround I came up with was to adjust the opacity of front/back on transform. Seems to work fine in both Safari/Chrome, and appears to work with dark mode as well.
.flip {
perspective: 600;
display: flex;
}
.flip-content {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-template-rows: repeat(1, minmax(0, 1fr));
margin-left: auto;
margin-right: auto;
transition: 0.4s;
transform-style: preserve-3d;
width: 100%;
}
.flip:hover .flip-content {
transform: rotateY(180deg);
transition: transform 0.3s;
}
.flip-front,
.flip-back {
backface-visibility: hidden;
grid-column-start: 1;
grid-row-start: 1;
margin-left: auto;
margin-right: auto;
max-width: 24rem;
overflow: hidden;
width: 100%;
}
.flip-front {
opacity: 100%;
}
.flip-back {
transform: rotateY(180deg);
opacity: 0%;
}
.flip:hover .flip-content .flip-front {
opacity: 0%;
}
.flip:hover .flip-content .flip-back {
opacity: 100%;
}
#media (prefers-color-scheme: dark) {
.flip-front,
.flip-back {
background-color: rgb(30, 41, 59);
color: rgb(226, 232, 240);
}
}
.container {
width: 450px;
}
<div class="container">
<div class="flip">
<div class="flip-content">
<div class="flip-front">
<h2>Step 1:<br>Lorem ipsum dolor sit amet</h2>
</div>
<div class="flip-back">
<p>Maecenas justo purus, semper id feugiat in, ornare vel urna. Pellentesque maximus tortor metus, eu posuere velit ullamcorper sit amet.</p>
</div>
</div>
</div>
</div>