search

mariusandra / pigeon-maps

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

Blurry map in Chrome #71

Open zdila opened 5 years ago

zdila commented 5 years ago

Map is blurry in Chrome as it uses fractional value in transform: translate(...) as sub-pixel transofmation. Rounding could probably help.

FF: image

Chrome: image

mariusandra commented 4 years ago

@zdila , reading what you wrote in #68 ("I have also fixed #71 there."), was the issue what you wrote here about rounding? If so, perhaps it would make sense to already implement the rounding inside latLngToPixel, as potential plugins using this function to get their coordinates might then be off by a pixel or half when rendering themselves, leading to janky behaviour...?

I'm not expecting a PR, just putting this comment out here to not forget about this in the future... :)

zdila commented 4 years ago

I have put the rounding here: https://github.com/FreemapSlovakia/freemap-v3-react/blob/f494782a2accaa83028030415b22fdeeec75ec86/src/pigeon-maps/index.tsx#L1631

It was just a quick patch and probably putting it to latLngToPixel would be more suitable as you mention. So far I haven't studied the code to that detail :-)

BTW the problem was not only with blurring but also one could sometimes see sub-pixel lines between tiles.

Thanks.

DavidSvetlik commented 4 years ago

Stumbled upon this as well. Some fix would be very nice since Chrome/Blink is major browser/engine and it really doesn't look very good. (Not sure how can I use latLngToPixel for map directly.)