Space between tiles on fractional zoom levels

[Eschon]

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
  • Fix white lines in Webkit #5354
  • Fix setTransform function for desktop webkit #6234
• Don't use decimal pixels
  • @perliedman's response
  • Round point before CSS translate is set #6543
• display: grid
  • @IvanSanchez's response
• Leaflet.TileLayer.NoGap
  • New PixelGrid class. Implements #4844, fixes #4637 and #3575. #5290
    • Pluggable TileLayer canvas renderer #4844
• L.TileLayer.Canvas in core #8302

(See also #3575 (comment).)

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

---

(Also, mix-blend-mode is now used to alleviate the tile gaps in Chromium-based browsers: #8891.)

/@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/

[mourner]

No idea. :( Although I only saw the problem in Safari, — Chrome/Opera worked fine.

[IvanSanchez]

Does anyone have an idea how this can be fixed?

I have an idea, but it's linked to the words "radical" and "experimental":

https://github.com/IvanSanchez/Leaflet.gl

One of the things I discovered is that textures have to be clamped. i.e. if this line is removed : https://github.com/IvanSanchez/Leaflet.gl/blob/master/src/core/GlUtil.js#L74 slivers ("spaces between tiles") appear (as the texture wraps around the triangle and half a pixel of the other side of the tile is shown). So, my educated guess is that Webkit is antialiasing half a pixel on the edge of each image.

As of now, the tilelayer triangles form a complete mesh that is rendered without slivers... but the words "experimental" will be all over that for the time being.

[Eschon]

@mourner It has a stronger effect in Safari but it is also visible in Chrome.

@IvanSanchez Wow nice work, but I don't think that I can use that (yet).

[mourner]

@Eschon yeah, I probably didn't notice this because on Retina screen, it's even less visible.

[Eschon]

This seems to affect Firefox now too in some cases.
I couldn't reproduce it in jsFiddle but if you look at that site
I get the same spaces in Firefox 39 and 41.0a2

Edit: This seems to be a problem with iframes. If I open the map directly it doesn't reproduce.

[IvanSanchez]

I doubt this will be possible for 1.0 without a lot of hacking. Pushing to the bottom of the backlog.

[afilp]

We experience the same problem on latest Chrome too. I wish that you find a possible fix as OpenStreet maps do not show well with these lines. Thanks.

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