在 chrome 中的第一次过渡时隐藏卡背

Posted 2023-03-06

【中文标题】在 chrome 中的第一次过渡时隐藏卡背

【英文标题】：Card back hidden on first transition in chrome

【发布时间】：2020-04-10 06:49:17

【问题描述】：

我正在开发一种在正面和背面显示各种内容的通用卡片。卡片一键翻转 180 度。

在 Chrome 中，当我在背面有包含绝对或相对定位的内容时，卡片的背面仅在过渡结束时（或附近）才可见。

在 Safari 和 Firefox 中我没有看到同样的问题。

问题可以在这支笔中看到 https://codepen.io/rumbletumble/pen/GRgNeLg

我试过了

使用动画而不是过渡，但存在同样的问题 在卡片背面添加backface-visibility: visible，但这会导致卡片闪烁

这可能只是 Chrome 中的一个错误吗？

【参考方案1】：

我已经更改了下面的类，现在它似乎在所有浏览器中都可以正常工作。 （无法测试 IE）

/* hide back of pane during swap */
.front, .back 
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

  transform: rotateX(0deg);
  transform-style: preserve-3d;

  position: absolute;
  top: 0;
  left: 0;
  color: cornSilk;
  text-align: center;
  font: 3em/240px 'Helvetica Neue', Helvetica, sans-serif;
  box-shadow: -5px 5px 5px #aaa;

【讨论】：

不幸的是，这个解决方案不起作用。该问题仅在第一次转换时发生，随后的转换不会出现问题。现在 Chrome 已经完全支持 backface-visibility 超过 5 年了，所以应该不需要供应商前缀。 developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility

抱歉，我必须在真正完成编辑之前发布此内容，我已对上述内容进行了编辑，现在似乎对我有用，而且您对多年来支持背面可见性的说法是正确的，应该总是去官方文档duh！

好像加了transform-style:preserve-3d;到后面已经解决了这个问题。但是，我不确定为什么。根据我在文档中阅读的内容，这将创建一个新的 3D 上下文，但我们已经在包含“翻转器”的元素上指定了 preserve-3d。知道为什么这可以解决问题吗？

如果您有任何进一步的链接，那就太好了。感谢您的回答！