search

mariusandra / pigeon-maps

ReactJS Maps without external dependencies
https://pigeon-maps.js.org/
MIT License
3.44k stars 142 forks source link

White lines between tiles on mobile Firefox #123

Open robinmetral opened 3 years ago

robinmetral commented 3 years ago

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

Test app Official demo
photo5865978282208507312 photo5865978282208507313

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

mariusandra commented 3 years ago

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

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: image