CSS：Chrome中背面可见性错误的解决方法

Question

我有一个容器，可以在两侧加载内容并在一定时间后翻转。当前面的元素为空时，后面的元素在Chrome中可见，当加载了iFrame时，这显然是一个错误，因为-webkit-backface-visibility应该阻止这个。

http://jsbin.com/beqafotu/1/edit 适用于Firefox，但不适用于Chrome

有一种简单的方法可以解决这个问题吗？出于性能原因，我需要在内容加载并显示在后面才能翻转到前面，因此我不想更改时间。

Answer 1

您可以提前加载iframe，但视频会在您翻转之前开始播放。

如果视频是HTML5视频而不是iframe，则可以防止这种情况，因为可以使用.pause()方法暂停HTML5视频，并且当用户翻转时可以调用.play()方法容器

Here is a jsbin显示预加载的iframe。