Leaflet: Missing tiles after fast zoom in and out with wouse-wheel

[oliverheilig]

I'm experiencing missing tiles when i zoom in and out on the map. I first thought it's an issue with my tile-provider. But after extensive tests i can reproduce it with any Leaflet map and any provider. It's a bit tricky to provoke this though.

How to reproduce

• I've tested it with LL 1.0.3, and the current trunk
• I can reproduce it with Chrome, FireFox and Edge on Windows 10
• I can reproduce this with a zoom-gesture on my notebook and a real mouse on my PC
• I even can reproduce it with the Leaflet quickstart sample http://leafletjs.com/examples/quick-start/example.html:
• First zoom out to world view.
• Then zoom in very fast with the mouse-wheel
• Immediately afterwards zoom out two wheel-clicks.

You need the right timing to get this result, i manage this about 20% of the time. All i can see is that the missing tile isn't even requested (using fiddler).

[IvanSanchez]

Since I cannot reproduce this easily, I'm gonna ask you to find some reproducible timings with synthetic WheelEvents.

Something like:

    function doTheWheel(amount) {
      var mapSize = map.getSize();
      var ev = new WheelEvent('wheel', {

        deltaX: 0,
        deltaY: amount,
        deltaZ: 0,
        deltaMode: 0,

        clientX: mapSize.x / 2,
        clientY: mapSize.y / 2
      });

      map.getContainer().dispatchEvent(ev);
    }

    function doTheWheelClosure(amount) {
      return function() {
        return doTheWheel(amount);
      }
    }

    setTimeout(doTheWheelClosure(-50), 600);  // Scroll "up"/"in" three times in very quick succession
    setTimeout(doTheWheelClosure(-50), 610);
    setTimeout(doTheWheelClosure(-50), 620);

    setTimeout(doTheWheelClosure(50), 1500); // Scroll "down"/"out" twice some time later
    setTimeout(doTheWheelClosure(50), 1700);

See https://playground-leaflet.rhcloud.com/gaxu/edit?html,output for a half-baked example. Changing the times and scrolling distances should be everything you'd need to do.

[oliverheilig]

et voilà,

https://playground-leaflet.rhcloud.com/tefi/1/edit?html,output

This should reproduce it on chrome and edge. You should open it in incognito mode. Doesn't work on FF.

But i'm sure it will work on FF with different parameters as i can provoke it manually there. I'm quite good at it now :)

[IvanSanchez]

Hhhmmm.

I cannot reproduce this in my Chromium 56.0.2924 on Linux. I need other people to have a look and see if it's reproducible.

I wonder if this might be reproducible only on Win10?

[perliedman]

Same here, not able to reproduce unfortunately. Tried it on both Chrome 56 and MS Edge 38 on Windows 10.

[oliverheilig]

ok,

i now have a version that reproduces it for me on chrome, edge + ff (all latest version) on three differrent PCs, all running win 10 though.

Open your browser and clear your cache before opening

http://176.95.37.29/vectortest/missing-tiles.html

[IvanSanchez]

Hhhhhmmmm, interesting, I can reproduce with that.

[perliedman]

Yep, that gives me a big, blank square in the middle of the screen. 😞

[IvanSanchez]

I have this feeling that the bug involves a race condition in the tile pruning algorithm. I'm officially declaring a preemptive brainmelt.

[oliverheilig]

ok,

i think i tracked it down to be a race condition at the incremental update. https://github.com/Leaflet/Leaflet/pull/5431

My test program runs ok now.
http://176.95.37.29/vectortest/missing-tiles-fixed.html

Also stress-tested it with a sample that makes heavy use of tiles layers.
http://176.95.37.29/agebs/

[oliverheilig]

After testing with fix #5431 for a month, i consider this bug to be fixed.