Wrong tiles pruned for "irregular" grids

[rkaravia]

• I've looked at the documentation to make sure the behavior is documented and expected
• I'm sure this is a Leaflet code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
• I've searched through the issues to make sure it's not yet reported

Steps to reproduce
Steps to reproduce the behavior:

• Configure a map with a CRS that has resolutions which are not all powers of two, such as this one:

  var resolutions = [500, 250, 100, 50, 20, 10, 5, 2.5, 2, 1.5, 1, 0.5, 0.25, 0.1];
  
  var CRS = L.Class.extend({
    includes: L.CRS.EPSG3857,
  
    initialize() {
      this._scales = resolutions.map(resolution => 1 / resolution);
      this.transformation = L.transformation(1, 0, 1, 0);
    },
  
    scale(zoom) {
      return this._scales[zoom];
    },
  });

• Observe the behavior when zooming between two zoom levels that have resolutions which are not a factor of 2 apart, e.g. between level 12 and 13 (resolutions 0.25 and 0.1).

Expected behavior
Previous zoom level is retained (no dark gray flash):

Current behavior
Previous zoom level is pruned (dark gray flash):

Environment

• Leaflet version: 1.4.0

Additional context

This is relevant for displaying maps from swisstopo (the national mapping agency of Switzerland), e.g. when using my Leaflet plugin, because their tile service has an "irregular" grid, see documentation of swisstopo. In their defense, these resolutions are mostly based on corresponding paper map scales that have been around for decades.

See example with swisstopo tiles here, they might be blocked in some countries, YMMV. Anyway, the minimal example with artificially delayed debug tiles below shows the problem more clearly.

Minimal example reproducing the issue

See this example on codepen.

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