Leaflet: not all tiles loaded until resize window

Resizing on windows resize works correctly, see this example: http://leaflet.cloudmade.com/debug/map/map-mobile.html

If you resize the map container manually, you need to call map.invalidateSize().

I'm seeing the same issue. Only some tiles are being displayed initially, but if I resize my browser's window, all of the tiles are shown.

NOT fixed for this bug on chrome27.I have the same problem
The url is failed

Check this one: http://leafletjs.com/examples/mobile-example.html

@mourner I have to change the map dynamically.And I use the map._onResize() to fix it.The url above is a fullscreen example,not for changing map size.thanks for your hack @ludinov-stuzo

@mourner I have found the problem.I use setTimeout() to execute the invalidateSize() after the animate.

    var is_fullScreen=0;
    $("#close_left").click(function(){
        if(is_fullScreen){
            $("#left_panel").animate({left:0,opacity:1},800);
            $("#right_panel").animate({marginLeft:280},800);
            this.className="icon-left";
            is_fullScreen=0;
            setTimeout(function(){ map.setView([5,40],2);},1000);
        }else{
            $("#left_panel").animate({left:-280,opacity:0},800);
            $("#right_panel").animate({marginLeft:0},800);
            this.className="icon-right";
            setTimeout(function(){map.invalidateSize();            map.setView([5,-20],3);},1000)
            is_fullScreen=1;
        }
    });

Resizing on windows resize works correctly, see this example: http://leaflet.cloudmade.com/debug/map/map-mobile.html

If you resize the map container manually, you need to call map.invalidateSize().

You made my day. My map just wouldn't work right. None of the functions including setView, flyTo, panTo, fitbounds would work properly. It would work sometimes, and sometimes not. I just couldn't understand when it did. Then I saw it works when I resize the window, and after hours of useless R&D reached this thread.

Thanks a lot.

Listen to Map obj helped to me. add a function that trigger when map is loaded or changed size and inside execute - map.invalidateSize().

The react hooks way:

import { Map as LeafletMap } from "react-leaflet";

export default const MyMap = () => {

   useEffect(()=>{
        mapElement.current.leafletElement.invalidateSize();
    },[mapElement])


  /*render and other function*/
}