As the image attached below, there are some sub-pixel white grid-like image borders when running FitsMap using Chrome.
This could be caused by the floating point rendering inaccuracies when calculating the image position and then rendering it on the screen. I try checking the source code and find this can be resolved by forcing an integer pixel of translate3d CSS attribute for mapPane.
<div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(XXXpx, YYYpx, 0px);">......</div>
So I write a new scirpt, to call it after zoomend and moveend, to force the XXX, YYY to be integer. Then in Chrome, there will be no sub-pixel grid-like white image border.
For those users, who have made their map directory already, they may directly import the new integerTranslate.js file in the index.js file and un-comment the final two lines within for event callback. Then the white grid issues can be resolved in Chrome and do not need to rebuild the map.
As the image attached below, there are some sub-pixel white grid-like image borders when running FitsMap using Chrome.
This could be caused by the floating point rendering inaccuracies when calculating the image position and then rendering it on the screen. I try checking the source code and find this can be resolved by forcing an integer pixel of
translate3dCSS attribute formapPane.So I write a new scirpt, to call it after
zoomendandmoveend, to force the XXX, YYY to be integer. Then in Chrome, there will be no sub-pixel grid-like white image border.For those users, who have made their map directory already, they may directly import the new
integerTranslate.jsfile in theindex.jsfile and un-comment the final two lines within for event callback. Then the white grid issues can be resolved in Chrome and do not need to rebuild the map.