It seems the map element size has changed since the initialization and you did not invalidate it.
Did you change the visibility (eg. display: none
style), position (eg. position: absolute
or position: fixed
like in affix), or removed any HTML element dynamically (with JS)? Perhaps, you are loading the resources in the wrong order and styles are loaded after the leaflet.js
? Or, perhaps you changed margins or padding? These kind of operations can change the size of other elements implicitly and the Leaflet applet loads the tiles only for an area covered by its old size. It shows already loaded tiles correctly in this "grey" area, though, so you can scroll up and the grey space at the bottom will be filled then.
If this is the case, you should execute invalidateSize()
method on your Leaflet map object.