ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #511 from elemoine/mobilecss

Browse Source 
iOS (iPad) map animated dragging tile refresh bug
This commit is contained in:
Éric Lemoine
2012-06-12 12:26:09 -07:00
parent acb489ad79 476556e864
commit 1af83576f2
8 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/mobile-drawing.html
View File

@@ -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>

2
examples/mobile-jq.html
View File

@@ -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>

2
examples/mobile-layers.html
View File

@@ -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>

2
examples/mobile-navigation.html
View File

@@ -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>

2
examples/mobile-sencha.html
View File

@@ -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>

2
examples/mobile.html
View File

@@ -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>

10
notes/2.12.md
View File

@@ -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.

12
examples/style.mobile.css → theme/default/style.mobile.css
View File

@@ -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);
}
}