Better way to get GPU support, and avoid flicker

These declarations were suggested on
http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
This commit is contained in:
ahocevar
2012-12-21 08:27:13 +01:00
parent afe53aba7d
commit d2b3bded72
3 changed files with 39 additions and 15 deletions

View File

@@ -15,11 +15,19 @@ html, body, #map {
/* Turn on GPU support where available */
.olMapViewport, .olMapViewport * {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}
.olLayerDiv svg * {
-webkit-transform: none;