对于 "overflow: scroll"，翻页卡片背面的内容显示在前面 Chrome，而不是其他浏览器

Question

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

该页面使用 JQuery Flip plugin 作为双面卡片，每面都有不同的内容。由于背面的内容是可变长度的，我想将其包含在带有 style="overflow: scroll;" 或 style="overflow: auto;".

的 <div> 标签中

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

Here's一个fiddle说明问题。单击卡片将其翻转。如果您在 Chrome 上运行 fiddle，您会在正面看到背面内容（反转）。如果你运行它在 Safari 和 Firefox 上，它会按需要工作。

我已经写信给插件的作者寻求可能的解决方案（尚未答复），但我认为这不是插件问题，而是 Chrome 如何解释 [=34] 的一些不一致=] 风格。我怀疑有一些 CSS，可能与 3D 效果有关，我可以使用它们使 Chrome 正确显示页面。

如果您能提供任何帮助，我将不胜感激。

PS

在 David Walsh 的博客上，Walsh writes "A Note from CSS Animation Expert Ana Tudor: Applying certain properties with certain values (like overflow: hidden) on the card element would disallow it to have 3D transformed children." 这可能是为什么效果对 Chrome 不起作用的线索，但没有解释为什么它对Safari 和火狐浏览器。似乎没有提供任何解决方案，而且我看不到联系 Walsh 或 Tudor 的方式。

Answer 1

这是一个有趣的错误，显然只出现在 OS X 上。我不确定为什么滚动溢出会导致您的问题，但我确实找到了一个简单的 hack。

将滚动元素上的 backface-visibility 设置为 hidden 即可解决问题。您甚至可以在您的案例中使用 inherit 关键字。

工作示例（JSFiddle）：

#card .back > div {
    backface-visibility: inherit;
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.14/dist/jquery.flip.min.js"></script>
<script>
    $(function() {
        $("#card").flip({
            trigger: 'click'
        });
    });
</script>
<div id="card" style="width: 300px; height: 200px; margin: 10px;">
    <div class="front" style="border: 1px solid; padding: 10px;">
        Content for FRONT of card
    </div>
    <div class="back" style="border: 1px solid; padding: 10px;">
        <div style="height: 170px; overflow: scroll;">
            Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>
        </div>
        <div style="margin-top: 10px;">Footer</div>
    </div>
</div>

Answer 2

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

已在桌面和移动设备上测试

演示

http://jsfiddle.net/zdapLrbs/

css

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

对于 "overflow: scroll"，翻页卡片背面的内容显示在前面 Chrome，而不是其他浏览器

With "overflow: scroll", contents of back of flip card displays in front for Chrome, not other browsers

css

3d

jquery

google-chrome

flip

工作示例（JSFiddle）：