Webkit 背面可见性不起作用答案

【问题标题】：Webkit backface visibility not workingWebkit 背面可见性不起作用
【发布时间】：2011-09-17 14:31:34
【问题描述】：

我正在构建一个使用 -webkit-transform: rotateY 属性翻转卡片的简单示例。

几天前它工作正常，但突然停止工作。效果仍然有效，但是当我将鼠标悬停在卡片上时，正面应该消失以使背面可见。为此，我使用了 -webkit-backface-visibility: hidden 属性。但它似乎不再适用于 chrome （在稳定版和夜间构建版本中）

这里是代码，以防我做坏事

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Card Flip Using CSS</title>
    <style type="text/css">
        body {
            background-color: #3d994a;
        }
        h1 {
            font-size: 30pt;
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            display: block;
            text-shadow: 1px -1px 0px #4E4E4E;
        }
        #container { 
            -webkit-perspective: 1000; 
        }
        .card {
            position: relative;
            width: 286px;
            height: 392px;
            -webkit-transform-style: preserve-3d;           
            -webkit-transition: all 0.5s linear;           
        }   
        #container:hover .card{
            -webkit-transform: rotateY(180deg);
        }
        .face {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            border-radius: 20px;    
            border:1px solid #eee;
            background-color: #FFF;
            box-shadow: #000 3px 2px 4px;
        }
        .back {
            -webkit-transform:rotateY(180deg);  
        }
    </style>
</head>

<body>
    <h1>Hover over the card to flip it</h1>
    <div id="container">
        <div class="card">
            <div class="front face">            
                <img src="images/back.png" alt="" />
            </div>
            <div class="back face">
                <img src="images/front.png" alt="" />
            </div>      
        </div>
    </div>
</body>
</html>

我得出这个结论是因为我做了几个简单的例子，只使用了一个旋转的 div，上面有一个简单的文本，背面隐藏属性，它仍然可见。此外，this example 使用此属性并且也停止工作。所以，总而言之，我的问题是，是否有其他人对此属性有问题或我的代码有问题？

【问题讨论】：

我在 webkit 转换和-webkit-backface-visibility: hidden; 中有类似的问题。有什么发现吗？
我不知道为什么，但它神秘地修复了。这可能是一个已修复的错误。
我也有同样的问题。我想知道是否与其他css规则有任何冲突
我遇到了同样的问题，但在 Safari 中。我的“前”视图的背面仍然显示，而在 Chrome 中我得到了正确的效果（后视图按预期可见）。
好的，问题解决了。 LESS 通过尝试将其计算为数值运算，对我的“preserve-3d”值做了一些事情。将 -webkit-transform-style 设置为 e("preserve-3d") 可以解决问题。所以似乎对于 Chrome，preserve-3d 是默认值，但不是 Safari。

标签： css webkit

【解决方案1】：

就放这个-webkit-transform:rotateY(0deg);，你需要先告诉浏览器哪个是正面。

【讨论】：

这为我解决了一些问题；在前后左右闪烁。背面可见性不起作用。 ::before & ::after 元素似乎在与其他元素不同的 z-index 上

【解决方案2】：

当孩子拥有webkit-transform 时，我对此类元素的孩子也有类似的问题。我注意到我还必须在该元素上设置背面可见性：

<style>
#div1 {
    -webkit-transform: rotateX(180deg);
    -webkit-backface-visibility: hidden;
}
#div2 {
    -webkit-transform: translate3d(0,0,0);
}
</style>

<div id="div1">
    <div id="div2">
        Text
    </div>
</div>

所以解决方法也是使用：

#div2 {
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden; /* again */
}

【讨论】：

EricG，我知道这很奇怪，但我也遇到了同样的问题，因为我完全按照您的回答方式做...并且删除孩子的背面属性使其正常工作...这很好奇...（我正在处理 shadowDOM）

【解决方案3】：

有趣的是，如果您将不透明度设置为 1 以外的任何值（例如 0.99），背面可见性会突然生效。

【讨论】：

请注意 GPU 上的不透明度非常昂贵
这太疯狂了 O_O ！它解决了我所有的问题......但让我很恼火......我很想找到如此有效的跨浏览器解决方案......
这里有同样的问题。仅在 Chrome 中。这到底是怎么回事？你知道，当我们必须使用 CSS 和 HTML 指定带有背面数据的 3d 旋转平面时，我们应该意识到超媒体这个好主意已经走得太远了。 Web 3 和彻底重写的时候了
很遗憾，这行得通。哼哼。至少我只是在写原型代码......哦等等......没有其他方法可以解决它所以生产：我们来了！
有人可以解释为什么这是“工作”吗？这是 Chrome 错误吗？无论如何，同样的错误不会出现在 Firefox 中。

【解决方案4】：

如果您在此处测试了所有其他选项，并且在您的浏览器上运行 this example 时没有任何效果，那么请确保下面示例中与 #card 对应的元素具有 overflow:visible：

<div id="container">
    <div class="card">
        <div class="front face"></div>
        <div class="back face"></div>      
    </div>
</div>

【讨论】：

溢出：hidden 把事情搞砸了。真的很烦人，但我不能在容器上使用它。

【解决方案5】：

我在 Windows XP 上的多个 Chrome 版本中都遇到过这个问题，包括 Chrome 24。

这解决了它：

通过此 URL 打开 chrome 标志编辑器：
```
  chrome://flags/
```
启用以下设置：

覆盖软件渲染列表 覆盖内置软件渲染列表并在不受支持的系统配置上启用 GPU 加速。
还要确保启用加速的 CSS 动画。

这解决了问题的事实表明 Chrome 认为我的系统是“不受支持的系统”。因此，您的里程可能会根据 Chrome 对您系统的印象而有所不同。

【讨论】：

网站访问者怎么样？

【解决方案6】：

我在某处读到这与主机 PC 的 GPU 能力有关。这适用于每台具有不错 GPU 的设备。证明这一点的事实是，即使在安装了全新操作系统 (win8) 和旧 XP 机器后，它也不适用于戴尔 Mini。问题是，背面可见性存在，但没有被调用，这意味着我无法使用 javascript 来检测这一点。

检查http://amproductions.org

【讨论】：

【解决方案7】：

似乎它在 Mac 上不太稳定，我离开 chrome 几个小时，页面动画工作，当我回来时，可见性停止工作。 Chrome 重启有助于解决问题。

【讨论】：