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>
Best Answer
You should try using the following.
only on the 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.