Alleviate tile gaps in chromium by using mix-blend-mode CSS

[IvanSanchez]

This alleviates the dreaded tile gaps of #3575, in a clean way, with no downsides that I'm aware of.

The tile gaps are still visible if the page zoom is not 100%, however (see #3575 (comment)).

Credit goes to @lapo-luchini (see #3575 (comment)).

[Falke-Design]

We should cherry pick to v1 this and ship it with 1.9.4 too

[jonkoops]

Tested this locally and it seems to indeed resolve the issue in Chrome.

[joeberkovitz]

I cherry-picked this CSS change to apply for a project that uses Leaflet 1.8 and it created problems with the colors of overlying markers. I don't know if anyone's tested this in combination with markers based on SVG file-based icons but it might be a good idea to verify that it doesn't break them.

[IvanSanchez]

@joeberkovitz Could you please open a bug report with that info? I haven't done throughout testing, but if you can provide a minimal test case where colours of overlaying markers are affected, that'd be very useful.

[joeberkovitz]

@IvanSanchez I've opened bug #8905 which demonstrates the issue. It turns out to need a more refined test case than just straight-up markers, it requires a custom GridLayer displaying vector point data using SVG icons from adjacent tiles where the icons (not the tiles) overlap. I've explained why I think this is a valid use case in the bug.

[mhirsch]

This does not seem to work in Firefox, and also has the side effect of making the "overlap" fix from #3575 fail, since the overlapped border is lightened.

[jonkoops]

@mhirsch please report this as a new issue with some steps to reproduce it.

[and-rej]

Please note this CSS property has a performance cost associated with it.

Our client uses virtualised desktops that don't have access to a GPU and we lost 10-20 FPS when we upgraded to Leaflet 1.9.4. Took me a while to trace it back to this, but fortunately it's easy to override the style and turn this off. We've never noticed the issue it's supposed to address.

You should be able to see it for yourself. Just turn off hardware acceleration in your browser settings, show the dev tools FPS meter, and pan a map around. Toggle the CSS property between plus-lighter and normal and you should see a difference in FPS.