search

backdrop-contrib / leaflet

Backdrop CMS Integration with the Leaflet map scripting library.
https://backdropcms.org/project/leaflet
GNU General Public License v2.0
2 stars 2 forks source link

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

Open indigoxela opened 3 years ago

indigoxela commented 3 years ago

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: https://github.com/Leaflet/Leaflet/issues/6101 And it probably (?) has to be solved in the browser.

tkcent commented 3 years ago

Can confirm this fixes the problem for me.

indigoxela commented 3 years ago

@tkcent many thanks for your confirmation.

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

leaflet-tile-gap-chrome

lachlanphillips commented 3 years ago

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.

ezgif-1-65b62320b01a

GeekyMonkey commented 2 years ago

This css nearly works:

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

indigoxela commented 2 years ago

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" :wink:).

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

GeekyMonkey commented 2 years ago

@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 commented 2 years ago

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 commented 1 year ago

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? :wink:

Means: this issue still has to stay open. :shrug: