BR: Single-pixel gap at fractional zooms in webkit browsers

[lume-bot[bot]]

        Location of Error: https://cms.lume.space/cla150/my-first-story

        Browser: Safari

        Submitted from: https://cms.lume.space/cla150/my-first-story

        User: mcfa0086@umn.edu

        Description: Single-pixel lines around tiles when zoom level is fractional.  Will attach screenshot and fix in a sec.

[cmcfadden]

[cmcfadden]

This is the fix I've used in the past (there are a lot of possible fixes out there)

 // Workaround for 1px lines appearing in some browsers due to fractional transforms
// and resulting anti-aliasing. adapted from @cmulders' solution:
// https://github.com/Leaflet/Leaflet/issues/3575#issuecomment-150544739
patchMapTileGapBug();

function patchMapTileGapBug () {

    let originalInitTile = L.GridLayer.prototype._initTile;
    if (originalInitTile.isPatched) return;

    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';
        }
    });

    L.GridLayer.prototype._initTile.isPatched = true;

}