webkit-transform:translate3d and div 100% height
I'm running into a weird issue on Safari and Chrome (mobile/desktop) that when I apply a global style for webkit-transform:translate3d, div background colors and 100% height set in the style no longer work. Additionally, setting top:0px and bottom:0px fail too. When I remove the global -webkit-transform style, everything works as expected. Any ideas?
*
{
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
margin:0px;
-webkit-transform:translate3d(0,0,0);
}
Full sample
<!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>
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.
I'm not sure why you'd want to apply a transformation to everything (perhaps you want the GPU to kick in?) in any case, the transformation on the html is causing this. You can solve it easily:
*:not(html)
{
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
margin:0px;
-webkit-transform:translate3d(0,0,0);
}
See http://jsfiddle.net/Wv5Mx/
加载中,请稍侯......
精彩评论