背面可见性：隐藏在 Safari 的网格中不起作用答案

【问题标题】：backface-visibility: hidden not working in grid on Safari背面可见性：隐藏在 Safari 的网格中不起作用
【发布时间】：2022-12-03 09:40:03
【问题描述】：

我非常接近解决this problem，通过嵌套 1:1 网格而不是使用 flex 和position: absolute；然而，虽然它在 Chrome 和 Firefox 上看起来真的非常有效，但在 Safari 上我的背面是可见的：

超级奇怪，在黑暗模式下，它似乎在背面接管之前短暂地正常工作：

我该怎么做才能让我的“翻转”卡片只显示正确的内容？ Can I Use 似乎认为 backface-visibility 已在 Safari 中得到支持 ~ 永远。这是一个新错误吗？难道我做错了什么？

（仅供参考，我使用的是 Safari 16.0）

小提琴：

.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>

【问题讨论】：

标签： css

【解决方案1】：

我在 Safari 上遇到了类似的问题，我想出的一个糟糕的解决方法是调整变换时前/后的不透明度。似乎在 Safari/Chrome 中都可以正常工作，并且似乎也可以在暗模式下工作。

.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>

【讨论】：