Merge pull request #511 from elemoine/mobilecss

iOS (iPad) map animated dragging tile refresh bug

examples/mobile-drawing.html

@@ -5,7 +5,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
         <meta name="apple-mobile-web-app-capable" content="yes">
-        <link rel="stylesheet" href="style.mobile.css" type="text/css">
+        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
         <script src="../lib/OpenLayers.js?mobile"></script>
         <script src="mobile-drawing.js"></script>

examples/mobile-jq.html

@@ -8,7 +8,7 @@
         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
         <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
         <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
-        <link rel="stylesheet" href="style.mobile.css" type="text/css">
+        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
         <link rel="stylesheet" href="style.mobile-jq.css" type="text/css">
         <script src="../lib/OpenLayers.js?mobile"></script>
         <script src="mobile-base.js"></script>

examples/mobile-layers.html

@@ -5,7 +5,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <link rel="stylesheet" href="style.mobile.css" type="text/css">
+    <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
     <script src="../lib/OpenLayers.js?mobile"></script>
     <script src="mobile-layers.js"></script>
     <style>

examples/mobile-navigation.html

@@ -6,7 +6,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <title>Mobile Navigation Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
-    <link rel="stylesheet" href="style.mobile.css" type="text/css" />
+    <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css">
     <script type="text/javascript" src="../lib/OpenLayers.js?mobile"></script>
     <script type="text/javascript" src="mobile-navigation.js"></script>

examples/mobile-sencha.html

@@ -6,7 +6,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <title>OpenLayers with Sencha Touch</title>
         <script src="../lib/OpenLayers.js?mobile"></script>
-        <link rel="stylesheet" href="style.mobile.css" type="text/css">
+        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
         <link rel="stylesheet" href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css">
         <script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js"></script>
         <script src="mobile-sencha.js"></script>

examples/mobile.html

@@ -5,7 +5,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
         <meta name="apple-mobile-web-app-capable" content="yes">
-        <link rel="stylesheet" href="style.mobile.css" type="text/css">
+        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
         <script src="../lib/OpenLayers.js?mobile"></script>
         <script src="mobile.js"></script>
         <style>

notes/2.12.md

@@ -25,6 +25,16 @@ Corresponding issues/pull requests:
  * https://github.com/openlayers/openlayers/pull/254
  * https://github.com/openlayers/openlayers/pull/261
 
+## style.mobile.css
+
+The theme/default directory now includes a mobile-specific CSS file, namely
+style.mobile.css. The OpenLayers mobile examples use this file. To use it
+in your mobile pages use tags like this:
+
+<link rel="stylesheet" href="openlayers/theme/default/style.mobile.css" type="text/css">
+
+(This file used to be in the examples/ directory).
+
 ## Sensible projection defaults
 
 The geographic and web mercator projections define default values for the maxExtent, and units. This simplifies the map and layer configuration.

theme/default/style.mobile.css

@@ -49,3 +49,15 @@ div.olControlZoom a:hover {
     -o-transition: opacity 0.2s linear;
     transition: opacity 0.2s linear;
 }
+/* Enable 3d acceleration when operating on tiles, this is
+   known to yield better performance on IOS Safari.
+   http://osgeo-org.1803224.n2.nabble.com/Harware-accelerated-CSS3-animations-for-iOS-td6255560.html
+
+   It also prevents tile blinking effects in iOS 5.
+   See https://github.com/openlayers/openlayers/issues/511
+*/
+@media (-webkit-transform-3d) {
+img.olTileImage {
+    -webkit-transform: translate3d(0, 0, 0);
+}
+}