Stack Overflow in IE8 when maxBounds is set and user scrolls past bounds

[ohgit]

Leaflet experiences a stack overflow in IE8 when the user scrolls past the map edge if maxBounds is set (on L.map). It seems to be continually trying to animate the pan back to valid territory. Turning off animations does not seem to work, since panInsideBounds() does not pass animation settings to panBy. I'm using continuousWorld:true, noWrap:true, with these max bounds:

    var southWest = new L.LatLng(-90, -180);
    var northEast = new L.LatLng(90, 180);
    var mapMaxBounds = new L.LatLngBounds(southWest, northEast);

This works fine in IE9 and FF 19. I'm using version 0.6.4, which already has the fix for Issue #1866.

Adding a second parameter on this line in panInsideBounds() allows panBy to respect options, like animate:false:
return this.panBy([dx, dy], this.options);

Another issue (possibly related?) is that if the map is smaller than the view and maxBounds is set (try zoom:0), the browser will attempt to continually pan the map so it fits. FireFox gives the best visualization of this problem.

[mourner]

Is this reproducible on the master version?

[ohgit]

Yes - I pulled a copy of master today to verify.

[mourner]

Allright, will take a look.

[mourner]

Wow, just realized I didn't merge the fix to the bug yet. @ohgit could you check if this pull request #1946 fixes the bug for you?

[mourner]

Also, this seems to be a duplicate of #1908, so closing in favor of that issue.

[ohgit]

It works for me after I make this modification:

    _panInsideMaxBounds: function (options)
    {
        if (options)    {
            this.panInsideBounds(this.options.maxBounds, options);
        } else {
            this.panInsideBounds(this.options.maxBounds, this.options);
        }
    },

I'm very new to leaflet, so I could be using it incorrectly, but I think this is happening because in my case panInsideMaxBounds is called automatically when the user scrolls past the map edge, not called explicitly by my code. So my execution path goes into the "else" condition that I've added, which passes on the map options instead of using the (undefined) parameter.

I'm also unfamiliar with GitHub courtesy - should I continue responding in this thread or move the discussion to #1908?

[mourner]

Do you mean it works with the mentioned pull request applied and additionally your modification and also passing animate: false to the options, and not in any other case?

[ohgit]

It works with the mentioned pull request applied and additionally my modification. I set animate: false on my map options, and (to my knowledge) cannot explicitly pass an options parameter to _panInsideMaxBounds since I'm not calling it directly.

I'm not aware of any other case in which it fails.

[mourner]

I mean, it should generally work without explicitly disabling options... Can you set up a simple JSFiddle so that I could check that when I have access to IE8?

[ohgit]

I see what you mean now :) In my application, I have to set animate to false or a stack overflow occurs in IE8, but based on the below, it may be a flaw in the way I’m using leaflet.

I put together a JSFiddle. I’m not sure how to add an external resource that uses a non-standard version of Leaflet. If you have a URL I can point it to, let me know and I’ll update the JSFiddle.

To view the constant zooming issue, open FireFox (I’m using 19) to the following URL and scroll out on the map (it will bounce back and forth). I think you will see that this is resolved if this is pointed to a copy of Leaflet with pull request #1946.
http://jsfiddle.net/ohfiddle/m5EAG/9/

JSFiddle fails to “initialize the awesome” in IE8, so it may be more tricky to test for Stack Overflow. You may have luck using this IE8 workaround recommended by JSFiddle:
http://jsfiddle.net/draft/

[ohgit]

So my recommendation would be to merge pull request #1946, possibly including the _panInsideMaxBounds change I mentioned above.

[pwhipp]

I have an almost certainly related repeatable infinite loop which occurs with panInsideMaxBounds in chrome and firefox you can see here: http://www.footholdgame.com/experiments/scratch_test/

The cause is this bit of code:

lmap = L.map('map', {minZoom: 2,
         maxZoom: 16})
lmap.fitWorld()
lmap.setMaxBounds(lmap.getBounds()) // Keep it here if zoomed out and panned about

A quick search through the source shows that it's using the panInsideBounds function to constrain the map to the max bounds. This function is being called repeatedly leading to the jitter.

In the function we see it calling panBy which is tripping a move event which is tripping the panInsideBounds again causing the infinite loop.

Looking at the variables in chrome's console:

viewNe
L.Point {x: 1024, y: 132, clone: function, add: function, _add: function…}
ne
L.Point {x: 1024, y: 132.00000000000006, clone: function, add: function, _add: function…}
viewSw
L.Point {x: 0, y: 892, clone: function, add: function, _add: function…}
sw
L.Point {x: 0, y: 892.0000000000001, clone: function, add: function, _add: function…}

The use of the Math.ceil function is causing a repeated 1px jump in dy.

I'm not sure what the solution to this should be - perhaps we are projecting to pixels, so the project function itself should perhaps handle the rounding. Alternatively we should not be doing the ceiling and floor mapping in the panInsideBounds function.

In either case, rounding the projected values in panInsideBounds fixes the problem as a workaround:

panInsideBounds: function (bounds) {
    bounds = L.latLngBounds(bounds);

        var viewBounds = this.getPixelBounds(),
            viewSw = viewBounds.getBottomLeft(),
        viewNe = viewBounds.getTopRight(),
        sw = this.project(bounds.getSouthWest()),
        ne = this.project(bounds.getNorthEast()),
        swx = Math.Round(sw.x),
        swy = Math.Round(sw.y),
        nex = Math.Round(ne.x),
        ney = Math.Round(ne.y),
        dx = 0,
        dy = 0;

    if (viewNe.y < ney) { // north
        dy = Math.ceil(ney - viewNe.y);
    }
    if (viewNe.x > nex) { // east
        dx = Math.floor(nex - viewNe.x);
    }
    if (viewSw.y > swy) { // south
        dy = Math.floor(swy - viewSw.y);
    }
    if (viewSw.x < swx) { // west
        dx = Math.ceil(swx - viewSw.x);
    }

    if (dx || dy) {
        return this.panBy([dx, dy]);
    }

    return this;