Question

我在Safari和Chrome（移动/桌面）上遇到了一个奇怪的问题，当我为webkit-transform应用全局样式时：translate3d，div背景颜色和样式中设置的100％高度不再有效。此外，设置top：0px和bottom：0px也会失败。当我删除全局-webkit-transform样式时，一切都按预期工作。有什么想法吗？

    *
    {
        -webkit-user-select: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        margin:0px;
        -webkit-transform:translate3d(0,0,0);

    }

完整样本

<!DOCTYPE HTML>
<html>
<head>
    <title>Sample</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

     <style type="text/css">
        *
        {
            -webkit-user-select: none;
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            margin:0px;
            -webkit-transform:translate3d(0,0,0);

        }
        body {
        height:100%;
        }

    </style>


</head>
<body >

   <div id="myDiv" style="position:absolute;top:0px;left:0px;width:320px;height:100%;bottom:0px;display:block;background:black;color:black;border:1px solid black;">
            adsfasdf
    </div>

</body>
</html>

Answer 1

您应该尝试使用以下内容。

.hwa {
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform-style: flat;
}

仅限于div。

<div class="hwa"></div>

这样您就不必担心在合成图层和创建GPU之前使用大量CPU的后代选择器。请记住，GPU加速使用标准CPU动画的4倍内存（回流/重新计算/绘制）

此外，你应该确保尽可能地帮助浏览器，这意味着使用宽度：100％，高度：100％节省，因为需要大量的CPU来弄清楚如何构建复合层之前GPU接管。

Answer 2

我不确定你为什么要将转换应用到所有东西（也许你想让GPU开始？）无论如何，html上的转换正在引发这种情况。你可以轻松解决它：

*:not(html)
    {
        -webkit-user-select: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        margin:0px;
        -webkit-transform:translate3d(0,0,0);

    }

请参阅http://jsfiddle.net/Wv5Mx/

webkit-transform：translate3d和div 100％height

2 个答案: