Leaflet: Map content moves when zooming

[willemx]

My simple test-app (created with V1 beta2) has some strange zooming behaviour: when zooming out, the drawn polygon moves south-east and returns to its correct postion when the zoom operation ends. When zooming in, the drawn polygon moves north-west and returns to its correct postion when the zoom operation ends.

this is my app:

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: "&copy; <a href='http://openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
}).addTo(map);
var polygon = L.polygon([
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047]
]).addTo(map);

I published the app to testmapw.meteor.com, have a look...
If I replace V1.0.0 beta2 with V0.7.3 everything is ok again.

[IvanSanchez]

Cannot reproduce in beta2.

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

[willemx]

Did you try testmapw.meteor.com ?

[IvanSanchez]

Yeah, but if I cannot reproduce the bug in a controlled minimal environment, I have to assume it's not a problem in the Leaflet core.

Also, I cannot know what's going on in your webpage, as all the JS is minified and I cannot trace code execution.

[willemx]

Thank you for looking into this! I understand your position.
I would like to debug this myself then; I just need some advice on how/where to start.
I made a minimal Meteor app (https://www.meteor.com/) using a meteor package that wraps the leaflet V1Beta2 library: https://atmospherejs.com/bevanhunt/leaflet and deployed this to maptestw.meteor.com.
This shows the error as you have seen.
If I just replace the leaflet library package with an older version (V0.7.3) the error goes away.
I notified the package author of this problem too (https://github.com/bevanhunt/meteor-leaflet/issues/61) and he suspects it could have to do with "the tile set not having fully loaded"
Could you point me in a direction to verify this or give me some other advice to start debugging this?

[willemx]

Not sure if this info is of any value diagnosing the problem, but If I set { zoomAnimation: false } for the map, the erratic content movement is gone (but alas, also the animation :{ )...

[tc33133]

Sorry, I know this is closed, but I ran into this problem as well. My problem was due to using the old css file (0.7.3) instead of the current one (1.0.3). Hope this helps someone.

[ayozebarrera]

You helped me @tc33133, thanks!

[jdoblas]

Dear @tc33133 , what css file did you update?

[tc33133]

I was using the hosted version, and I didn't update the stylesheet link.
IE I was using

running version 1.0.3, so I should have been using

If you follow the directions to use the hosted version here http://leafletjs.com/download.html you should be fine.