cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #808 from danzel/safari-fixes

Browse Source 
Take another go at safari tile layer fix hack. Add a test case for it so we don't forget about it.
This commit is contained in:
Vladimir Agafonkin 2012-07-16 14:34:15 -07:00
commit d6b0b02c3f
3 changed files with 45 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
debug/hacks/jitter.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<meta name="viewport" content="width=device-width,initial-scale=1 maximum-scale=1.0 user-scalable=0">
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<div >
<form method="get">Click in field then scroll map (in up/left direction) to see shift of map tiles.
<fieldset><label for="textField">Name</label>:
<input id="textField" name="textField" type="text" value="">
</fieldset>
</form>
Bug tested to occur on: Safari on Mac (Tested in 5.1.7), iPad/iPhone 5.1.1. Hack is in L.Browser.safari and TileLayer._addTile
</div>
<script type="text/javascript">
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707'
});
//Undo the hack fix
L.Browser.safari = false;
var map = L.map('map')
.setView([50.5, 30.51], 15)
.addLayer(cloudmade);
</script>
</body>
</html>

3
src/core/Browser.js
View File

@ -4,7 +4,8 @@
ie6 = ie && !window.XMLHttpRequest, ie6 = ie && !window.XMLHttpRequest,
webkit = ua.indexOf("webkit") !== -1, webkit = ua.indexOf("webkit") !== -1,
gecko = ua.indexOf("gecko") !== -1, gecko = ua.indexOf("gecko") !== -1,
safari = ua.indexOf("safari") !== -1 && ua.indexOf("chrome") === -1, //Terrible browser detection to work around a safari / iOS browser bug. See TileLayer._addTile and debug/hacks/jitter.html
safari = (ua.indexOf("safari") !== -1 || ua.indexOf("iphone") !== -1 || ua.indexOf("ipad") !== -1) && ua.indexOf("applewebkit") !== -1 && ua.indexOf("chrome") === -1,
opera = window.opera, opera = window.opera,
android = ua.indexOf("android") !== -1, android = ua.indexOf("android") !== -1,
android23 = ua.search("android [23]") !== -1, android23 = ua.search("android [23]") !== -1,

2
src/layer/tile/TileLayer.js
View File

@ -315,7 +315,7 @@ L.TileLayer = L.Class.extend({
// get unused tile - or create a new tile // get unused tile - or create a new tile
var tile = this._getTile(); var tile = this._getTile();
//Chrome 20 layouts much faster with top/left (Verify with timeline, frames), Safari 5.1.7 has display issues with top/left and requires transform instead. (Other browsers don't currently care) //Chrome 20 layouts much faster with top/left (Verify with timeline, frames), Safari 5.1.7 and iOS 5.1.1 have display issues with top/left and requires transform instead. (Other browsers don't currently care)
L.DomUtil.setPosition(tile, tilePos, !L.Browser.safari); L.DomUtil.setPosition(tile, tilePos, !L.Browser.safari);
this._tiles[key] = tile; this._tiles[key] = tile;