Chrome(ium) 1 pixel gap between tiles in some map types

[indigoxela]

Only Chrome and Chromium on some OSes and/or with some special browser settings and only few map types seem affected.
In module leaflet_more_maps it only seems to affect google satellite layers (to be verified, though).

It's a known problem in the 1.x Leaflet library versions, here's their issue: Leaflet/Leaflet#6101
And it probably (?) has to be solved in the browser.

[tkcent]

Can confirm this fixes the problem for me.

[indigoxela]

@tkcent many thanks for your confirmation.

For others coming here - this is a screenshot of the problem in Chrome:

[lachlanphillips]

There's a really interesting repro you can do that exposes that this issue may be (at least in part) a chrome bug, operating independently of leaflet.

Essentially, you move the map around until you can see the 1px while the map is static. Then go to the leaflet-pane element and toggle the transform: translate3d property on and off.

The 1px line will vanish, move, reappear, all seemingly at random.

Hope this helps someone debug this.

[GeekyMonkey]

This css nearly works:

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

[indigoxela]

Hi @GeekyMonkey,

the workaround in this module has been released in April 2021. Are you still experiencing the gap with Backdrop? If so, which map types?

This issue here is just open, because I hoped, that Chrome would fix the browser bug a little sooner (I still hope but switched to "sooner or later" 😉).

As soon as they fixed it, the workaround gets removed again.

[GeekyMonkey]

@indigoxela Apologies. I've reported this in the wrong place. I got here from a google search and saw the project name "leaflet" and thought this was the Leaflet library itself, I didn't realize it was an integration library. Nevermind... :)

[indigoxela]

Seems like this bug will stay for a little longer. But the workaround changed in the meantime. The size hack just had ugly side effects causing "wobbling" images on zoom.

[indigoxela]

Leaflet 1.9.4 is out and it's supposed to provide the bugfix, but...
while mix-blend-mode works fine and fixes the problem in Chrome, it leads to a performance regression in Firefox.

So we adapt our workaround to reset the global (all browser) mix-blend-mode to normal and only set it for chrome-based browsers via css hack. Not ideal, but why punishing FF users for a Chrome bug? 😉

Means: this issue still has to stay open. 🤷

[indigoxela]

Wow, finally some progress on Browser side...

Leaflet/Leaflet#3575 (comment)

https://issues.chromium.org/issues/40084005

And it seems like the workaround on Leaflet side will change (again), which means, we'd also have to evaluate our override...

[indigoxela]

With Leaflet v2 the plus-lighter hack seems to cause the pixel gap, while it's gone without it.
Needs more testing, but probably we'll just remove/override it. It might also have to do with one of the Chrome(ium) updates.

Edit: nope, it's a little trickier than that.
Without the "plus-lighter-hack" the problem's back, when moving/swiping the map content, but gone with scrollwheel zoom. With the "plus-lighter-hack" there's now a slightly more noticeable problem with scrollwheel zoom.
The gaps are always there when zooming in the browser (not the map).
Their issue has now almost 200 comments and 5 PRs, which probably makes it more or less unusable.

Let's stick with our hack for the hack (CSS). 😉