Tile rendering shows lines / grid on map

[colbyfayock]

After the first render, when moving the map around, it shows a grid of lines

I'm on Mac 11.3.1 Chrome Version 90.0.4430.212

I solved this in the past with the following snippet:

import L from 'leaflet';

(function () {
  if (typeof window === 'undefined') return;
  if (!L || !L.GridLayer || !L.GridLayer.prototype) return;

  var originalInitTile = L.GridLayer.prototype._initTile;

  L.GridLayer.include({
    _initTile: function (tile) {
      originalInitTile.call(this, tile);

      var tileSize = this.getTileSize();

      tile.style.width = tileSize.x + 1 + 'px';
      tile.style.height = tileSize.y + 1 + 'px';
    }
  });
})();

Source: https://github.com/Element84/fogg/blob/master/src/plugins/leaflet-tilelayer-subpixel-fix.js
Original: Leaflet/Leaflet#3575 (comment)

Alternatively you could set the background to a really dark color (like simply black) or the gray from the tiles and it makes it a lot less noticeable 🤷