Leaflet: Flickering when zooming more than one zoom step at a time.

[AndreasSchmid1]

Zooming in or out very fast with the mouse wheel (more then one zoom step at a time) causes flickering (nearly every tile is unloaded before the new zoom level starts loading tiles).
This causes unattractive zoom effects.
When it is not browser specific you can reproduce this issue with the sample provided at http://leafletjs.com/.

[smedasn]

Would be interested in this feature/bugfix as well

[tvfire]

yes this is the only big downside of leaflet and the reason why i still stick with openlayers.

[ghybs]

Hi,

Thank you for your message.
When reporting an issue, please make sure to properly fill the issue template, even if the bug is not browser / OS / version specific (simply list the versions you have tested on).

It highly helps in understanding the situation and making sure we have enough information to investigate.

[ghybs]

How to reproduce

• Leaflet version I'm using: 1.1.0+
• Browser (with version) I'm using: Firefox, Chrome
• OS/Platform (with version) I'm using: Kubuntu 16.04
• step 1: add a Tile Layer
• step 2: zoom more than 1 level in/out at a time, e.g. programmatically or with the mouse scroll wheel quick enough.

What behaviour I'm expecting and which behaviour I'm seeing

• Expected: after zoom, tiles are scaled in/out until new tiles are loaded.
• Seen: if zoom change > 1, old tiles are pruned before new tiles are loaded and displayed.

Minimal example reproducing the issue

Leaflet 1.1.0: https://plnkr.co/edit/GPIDJunYNNoa0R3EvmYf?p=preview
Leaflet 1.2.0: https://plnkr.co/edit/oBnpgcTAfXSBSOYYXwz0?p=preview
Use the button below the map to programmatically change the zoom level.

Leaflet 1.0.3 seems not affected by this bug: https://plnkr.co/edit/JC03JkS2H2tFobcpgsRB?p=preview

• [x] this example is as simple as possible
• [x] this example does not rely on any third party code

[ghybs]

PR https://github.com/Leaflet/Leaflet/pull/3815 introduced an extra zoom change check, besides the map option zoomAnimationThreshold
https://github.com/Leaflet/Leaflet/blob/944f2de3a8932a2347acb33f72b83080c4f1b031/src/layer/tile/GridLayer.js#L452
See https://github.com/Leaflet/Leaflet/pull/3815#issuecomment-138537247 as for why threshold of 1 instead of re-using zoomAnimationThreshold.

However this PR is present in all v1.0.0-beta.2+ versions, so there should be something else that makes this bug visible on 1.1.0+ but not on 1.0.3…

[IvanSanchez]

OK, somebody please git bisect this thing to find the root cause.

[cherniavskii]

I tested it locally on current master branch and looks like it is already fixed:

[tvfire]

did you test "Increase zoom by 2" as well?

[cherniavskii]

Yes, it works as expected

[mourner]

@ghybs @AndreasSchmid1 can you confirm the issue is no longer present in the master version?

[ghybs]

Yes the issue is fixed in current master: https://plnkr.co/edit/E0aaMSGgOkiHhx4jqTDY?p=preview

In fact it sounds like a duplicate of https://github.com/Leaflet/Leaflet/issues/5622

I positively confirm that this was fixed by PR https://github.com/Leaflet/Leaflet/pull/5634
https://plnkr.co/edit/kZ3yX7ssmamhyucoTjiV?p=preview

[AndreasSchmid1]

I can confirm a big improvement but i cannot see that the issue is gone completely. If you zoom around with the mouse wheel heavily you will still notice periods where no tile is loaded in the viewport.
You can reproduce this with the plnkr from ghybs https://plnkr.co/edit/E0aaMSGgOkiHhx4jqTDY?p=preview. Just increase/decrease zoom by 5 for example

[ghybs]

@AndreasSchmid1 That is the effect of map's zoomAnimationThreshold option.

[AndreasSchmid1]

@ghybs ok thanks for info I will try that!