From d2b3bded72d5357a84a1a184da96e1157191620b Mon Sep 17 00:00:00 2001
From: ahocevar <andreas.hocevar@gmail.com>
Date: Fri, 21 Dec 2012 08:27:13 +0100
Subject: [PATCH] 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
---
 examples/mobile-wmts-vienna.css | 18 +++++++++++++-----
 theme/default/style.css         | 18 +++++++++++++-----
 theme/default/style.mobile.css  | 18 +++++++++++++-----
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/examples/mobile-wmts-vienna.css b/examples/mobile-wmts-vienna.css
index 7728df666f..e2fbf7a3ee 100644
--- a/examples/mobile-wmts-vienna.css
+++ b/examples/mobile-wmts-vienna.css
@@ -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;
diff --git a/theme/default/style.css b/theme/default/style.css
index 85206ce107..76d039c09a 100644
--- a/theme/default/style.css
+++ b/theme/default/style.css
@@ -489,11 +489,19 @@ a.olControlZoomOut {
 
 /* 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;
diff --git a/theme/default/style.mobile.css b/theme/default/style.mobile.css
index 6408067bd7..3c0f6eb83d 100644
--- a/theme/default/style.mobile.css
+++ b/theme/default/style.mobile.css
@@ -51,11 +51,19 @@ div.olControlZoom a:hover {
 }
 /* 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;