jquery - 使用 "overflow: scroll"时，翻页卡背面的内容在 Chrome 中显示在前面，而不是其他浏览器

Question

我正在 Mac 上开发一个网页，到目前为止已经针对 Chrome、Safari 和 Firefox 进行了测试。

该页面使用JQuery Flip plugin对于每面都有不同内容的双面卡片。由于背面的内容是可变长度的，因此我想将其括在 <div> 中。标记为 style="overflow: scroll;"或style="overflow: auto;" .

当我在Chrome浏览器上显示页面时，背面的内容在首页上以相反的方式显示，这当然是我不希望的。但在 Safari 和 Firefox 浏览器上不会出现此问题。

Here's说明问题的 fiddle 。单击卡片将其翻转。如果您在 Chrome 上运行 fiddle，您将在正面看到背面内容(反转)。如果您在 Safari 和 Firefox 上运行它，它将按预期工作。

我已经写信给该插件的作者寻求可能的解决方案(尚未得到答复)，但我认为这并不是插件问题，而是 Chrome 解释“溢出”样式的方式不一致。我怀疑有一些 CSS(可能与 3D 效果相关)可以用来使 Chrome 正确显示页面。

非常感谢您提供的任何帮助。

附注

在大卫·沃尔什博客上，沃尔什 writes “CSS 动画专家 Ana Tudor 的注释:在卡片元素上应用具有特定值(例如溢出:隐藏)的特定属性将不允许它具有 3D 转换的子元素。”这可能是为什么该效果在 Chrome 上不起作用的线索，但并不能解释为什么它在 Safari 和 Firefox 上起作用。似乎没有提供解决方案，而且我看不出有什么办法可以联系 Walsh 或 Tudor。

Answer 1

你需要给正面和背面一个背景颜色，否则它是透明的

在桌面和移动设备上进行测试

演示

http://jsfiddle.net/zdapLrbs/

CSS

.front, .back  {
 background-color:blue;
  color:white;
}