Space between tiles on fractional zoom levels

Note

This issue now has 150+ comments, most of which are concerned with hacky workarounds. I’ve compiled a list of a few comments that are discussing potential solutions:

• Chromium dev’s suggestion
• translate instead of translate3d
  • https://github.com/Leaflet/Leaflet/pull/5354
  • https://github.com/Leaflet/Leaflet/pull/6234
• Don’t use decimal pixels
  • @perliedman’s response
  • https://github.com/Leaflet/Leaflet/pull/6543
• display: grid
  • @IvanSanchez’s response
• Leaflet.TileLayer.NoGap
  • https://github.com/Leaflet/Leaflet/pull/5290
    • https://github.com/Leaflet/Leaflet/issues/4844
• https://github.com/Leaflet/Leaflet/issues/8302

(See also https://github.com/Leaflet/Leaflet/issues/3575#issuecomment-1108533500.)

Relevant browser bugs, filed by @hyperknot:

• https://bugs.chromium.org/p/chromium/issues/detail?id=600120
• https://bugs.webkit.org/show_bug.cgi?id=156130

/@Malvoz

As the screenshot shows there is a small space between the tiles. This happens to me on fractional zoom levels in Safari, Chrome and Opera. It seems like this was fixed in #2377 but later removed in 3ccbe5b in favour of better performance.

I tried reimplementing the fix to see the performance impact myself and it was pretty bad furthermore it didn’t even fix the problem for Chrome.

Does anyone have an idea how this can be fixed? Fractional zoom levels would be a great feature for our app but as long as this bug remains we can’t really use them.

Edit: I set up a jsFiddle that shows the problem: http://jsfiddle.net/Eschon/pw9jcjus/1/

[cmulders]

Especially on darker maps or images (in my case) the issue is quite noticeable. I think that antialiasing in the browser causes the spaces between tiles due to the fractional transform during zooming, as mentioned by Ivan.

Until a better solution is available, I will use this workaround (or hack) to make the tiles 1 pixel larger, with the side effect that they overlap by 1 px. Besides that the tiles will be slightly enlarged and scaled (by 1px).

/* 
 * Workaround for 1px lines appearing in some browsers due to fractional transforms
 * and resulting anti-aliasing.
 * https://github.com/Leaflet/Leaflet/issues/3575
 */
(function(){
    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';
        }
    });
})()

[ChrisLowe-Takor]

I’ve found a fix that’s stupid and really shouldn’t work.

.leaflet-tile-container img {
    width: 256.5px !important;
    height: 256.5px !important;
}

This should result in massive jarring seams around the tiles but I can’t see them at all and it fixes the space between the tiles.