Leaflet: Popups on lines move off the line when zooming

[catbadger]

When you draw a popup on a line then zoom in, the popup doesn't stick to the line. instead a gap appears between the line and the popup and this gap grows as you zoom in.

[ghybs]

Hi,

Please can you describe your issue with more details, context, Leaflet version, possibly OS and browser versions, etc? And reproduce your issue with code.
See the contributing guide > reporting bugs

Cannot reproduce your issue when popup is bound on a polyline with Leaflet 1.0.0-rc.3:
http://playground-leaflet.rhcloud.com/vaye/1/edit?html,output

[catbadger]

Thanks for getting back to me! I was able to reproduce this quickly using your playground:

• Set your starting zoom lower. I used 3, but you could use 1 for the most obvious reproduction of this issue.
• Use Chrome.

[yohanboniface]

To reproduce: http://playground-leaflet.rhcloud.com/zow/edit?html,output

Click on the "+" zoom control until zoom like 7 or 8, and you'll see the poup anchor offset from the polyline..

I can reproduce with Leaflet beta1, but I can't with 0.7.7: http://playground-leaflet.rhcloud.com/five/edit?html,output

[yohanboniface]

As far as I can tell, this is linked to the fact we round the coordinates in map.latLngToLayerPoint.
Loading the map at some zoom level and then zooming creates the gap. The more you zoom, the bigger the gap: after 8 zooms, I can see translate3d(556px, 36px, 0px) instead of translate3d(582px, 10px, 0px).
And even if we are updating the popup position on zoom (which should lower the impact of rounding), something creates the gap when we round.
What I actually don't get is that if I load the map at zoom 9 I get 582px, 10px as translate3d, which is correct. While if I load the map at zoom 1 then zoom 8 times, I get 556px, 36px. If I do the same experiment without the rounding, I get the correct result whatever the initial zoom.
For a Polyline, translate3d is just the output of map.latLngToLayerPoint, and I don't get how the initial zoom of the map can impact this method.

Ideally it would be better to stop rounding, but I'm not sure the side effects in old browsers, in CSS (the popup tip is quite tricky and may go in tilt in some edge cases with non rounded coordinates) and performance side.

What I'd suggest is to never round internally, and only round when we use the values in the browser (for example for translate3d). So I'd remove the rounding in map.latLngToLayerPoint, and add it in L.DomUtil.setPosition.

Here is a playground showing that patch:

http://playground-leaflet.rhcloud.com/fef/edit?html,output

Related: #4745

[dmvaldman]

I was also investigating this and found that even with removing the rounding in map.latLngToLayerPoint there is still a wobbling effect due to rounding elsewhere.

I brutishly uncommented the Point class's _round method here and the wobble went away. Though I have a feeling this may cause problems elsewhere as mentioned in https://github.com/Leaflet/Leaflet/issues/4745. I think a more delicate touch to remove all these rounding calls would solve these problems.

[catbadger]

So is there an official way to fix this for v1?