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

Question

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

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

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

Answer 1

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

如果视频是 HTML5 视频而不是 iframe，则可以避免这种情况，因为可以使用 .pause() 方法暂停 HTML5 视频，然后在用户翻转容器时调用 .play() 方法。

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