From 95afdee7030bc189e0a5715251683fb943f2c65f Mon Sep 17 00:00:00 2001 From: danzel Date: Tue, 17 Jul 2012 09:30:14 +1200 Subject: [PATCH] Take another go at safari tile layer fix hack. Add a test case for it so we don't forget about it. --- debug/hacks/jitter.html | 42 +++++++++++++++++++++++++++++++++++++ src/core/Browser.js | 3 ++- src/layer/tile/TileLayer.js | 2 +- 3 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 debug/hacks/jitter.html diff --git a/debug/hacks/jitter.html b/debug/hacks/jitter.html new file mode 100644 index 00000000..1810a7e2 --- /dev/null +++ b/debug/hacks/jitter.html @@ -0,0 +1,42 @@ + + + + Leaflet debug page + + + + + + + + + + + +
+
+
Click in field then scroll map (in up/left direction) to see shift of map tiles. +
: + +
+
+ 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 + +
+ + + diff --git a/src/core/Browser.js b/src/core/Browser.js index 6ad69388..0eaf24a6 100644 --- a/src/core/Browser.js +++ b/src/core/Browser.js @@ -4,7 +4,8 @@ ie6 = ie && !window.XMLHttpRequest, webkit = ua.indexOf("webkit") !== -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, android = ua.indexOf("android") !== -1, android23 = ua.search("android [23]") !== -1, diff --git a/src/layer/tile/TileLayer.js b/src/layer/tile/TileLayer.js index 049d34c3..f26b912c 100644 --- a/src/layer/tile/TileLayer.js +++ b/src/layer/tile/TileLayer.js @@ -315,7 +315,7 @@ L.TileLayer = L.Class.extend({ // get unused tile - or create a new tile 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); this._tiles[key] = tile;