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. 🤷