在Chrome的第一个转换中，卡背隐藏 [英] Card back hidden on first transition in chrome

问题描述

我正在开发一种通用卡，该卡可在正面和背面显示各种内容。只需单击一下，卡片即可翻转180度。

I'm developing a generic card that displays various content on the front and back. The card flips 180 degrees on a click.

在Chrome中，当我背面的内容包含绝对或相对位置时，卡片的背面仅在

In Chrome, when I have content on the back that contains absolute or relative positioning, the back of the card only becomes visible at (or near) the end of the transition.

在Safari和Firefox中，我看不到相同的问题。

In Safari and Firefox I don't see the same issue.

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

The issue can be seen in this pen https://codepen.io/rumbletumble/pen/GRgNeLg

我尝试过

• 动画而不是过渡，但存在相同的问题


• 向卡背面添加 backface-visibility：visible ，但这会导致闪烁卡

• Using animation rather than transition, but the same issue exists
• Adding backface-visibility: visible to the card back, but this causes flickering on the card

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

Could this simply be a bug in Chrome?

< img src = https://i.stack.imgur.com/U3aV5.gif alt =动画gif>

推荐答案

我更改了下面的类，现在看来在整个ll浏览器。 （无法测试IE）

I have change the below class and it now seems to be working fine across all browsers. (wan't able to test 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的第一个转换中，卡背隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！