0

我在 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>
4

2 回答 2

2

You should try using the following. 

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

only on the div.

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

This way you don't have to worry about descendent selectors which uses a lot of CPU before compositing the layers and creating the GPU. Keep in mind that GPU acceleration uses 4x the memory of standard CPU animation (reflow / recalculate / paint )

Also you should make sure that you help out the Browser as much as possible, this means use width: 100%, height: 100% sparingly since it takes a lot of CPU to figure out how to construct the composite layers prior to GPU taking over.

于 2012-12-11T06:20:44.787 回答
1

我不确定您为什么要对所有内容应用转换（也许您希望 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/

于 2011-04-05T23:26:02.273 回答