White lines between tiles on mobile Firefox

[robinmetral]

I'm seeing white lines between tiles on mobile Firefox (Android). Haven't reproduced on desktop or mobile Chrome.

Test app	Official demo

It happens with every tile provider I've tried, so I think the issue is somewhere in this library. As you can see, it's a big problem for dark maps tiles, in lighter variants the lines are not too obvious.

This might be related to #71. However, I've tried to apply the fix suggested by @zdila in https://github.com/mariusandra/pigeon-maps/issues/71#issuecomment-562038771 (round the transform() values), and it didn't fix it for me.

Does anyone know what the issue is? Happy to open a PR if I understand what the issue is. I'd love to avoid having to use Leaflet or Mapbox just because of this :stuck_out_tongue:

[zdila]

It is probably a bug of all Chrome-based browsers. See also https://github.com/Leaflet/Leaflet/issues/6101 or https://github.com/Leaflet/Leaflet/issues/3575.

[mariusandra]

I couldn't replicate this, not even on Firefox mobile, so it must be some kind of zoom issue? People have seen this even in Google Maps, so it's a pretty big problem, if it happens.

The suggested fix adapted to pigeon-maps v0.17.2 is something like this:

.pigeon-tiles img {
    width: 256.5px !important;
    height: 256.5px !important;
}

I'm very hesitant in including that in the core for obvious reasons though.

[zdila]

@mariusandra just for sure - do you have HiDPI screen? On regular DPI screens it is not reproducible.

[mariusandra]

Yeah, all my screens are retina. I'm now on the latest M1 Air, use a MBP 16" for work, have a 4K monitor and a 1440p Android phone. No issue on any.

[zdila]

In Chrome (95), directly from https://pigeon-maps.js.org/. It is not always visible there, just if you pan a lot then sometimes it appears: