IE9 dragging problem when using maxBounds (and a proposed fix) #1333
Description
In IE9, with Leaflet 0.4 and 0.5, there's a problem that occurs after finishing a pan/drag when the map has maxBounds set. I ran across this when attempting to use a non-standard type tile set, an image that has fixed boundaries.
When panning a map that has maxBounds set, if the drag causes the map to move beyond its boundary, it should bounce back to fit the boundary when the drag completes. This doesn't work correctly in IE9.
After quite a bit of effort tracking this down, it seems that the problem has to do with the difference in how animation is implemented in IE vs the other browsers. In particular, IE doesn't support the RequestAnimationFrame function, so it falls back to using setTimeout according to the logic (timeoutDefer) in Util.js.
Anyway, in the _onDragEnd function in Map.Drag.js, there are two L.Util.requestAnimFrame calls, the first which happens if inertia is turned on, the second if options.maxBounds is set. If both are true, then these are both called at the same time.
The problem is that the first L.Util.requestAnimFrame call in_onDragEnd does not pass set the 'immediate' parameter to true, whereas the second does. So the function parameter (fn) for these two calls will be executed in the wrong order, but only in IE (which uses timeoutDefer instead of RequestAnimFrame - look at the L.Util.requestAnimFrame definition).
So, my proposed solution is to change the first L.Util.requestAnimFrame call in _onDragEnd to this:
L.Util.requestAnimFrame(function () {
map.panBy(offset, decelerationDuration, ease);
}, map, true, map._container);
This may have other implications I'm not aware of, but it now seems to work in all versions of IE, FF and Chrome that I've tested.