Unable to deactivate leaflet fitBounds animation when shifting between different imageOverlay url and adjusting the dimension of the map

Question

I want to use leaflet to display zoomable pictures. Each time a user wants to display a new picture, the imageOverlay url is modified, the height of the map container is adjusted, and map.fitBounds() and map.invalidateSize() are called to fit the dimension of the new picture. This work fine, but allways come with an animation. I have tried to remove the animation by passing the right options to fitBounds or invalidateSize without any success.

in leaflet1.3.1 calling setView with the third argument set to "true" could do the job. But this is not the case anymore.

Hereafter a minimal example to reproduce the unwanted animation:

HTML

<button type="button" class="btn btn-primary" id="btn1">picture1</button>
<button type="button" class="btn btn-primary" id="btn2">picture2</button>
<button type="button" class="btn btn-primary" id="btn3">picture3</button>
<button type="button" class="btn btn-primary" id="btn4">picture4</button>

<div id="mapid" class="m-2"></div>
<img class="fit-picture m-2" id="pic">

CSS

#mapid{ 
  height: 180px; 
  width:250px;
}

#pic { 
  width:250px;
}

JS

var map_options = {                                                       
crs                 : L.CRS.Simple,
attributionControl  : false,        
zoomControl         : false,
maxBoundsViscosity  : 1,
animate             : false,                                    
pan                 : false,
duration            : 0,
};

var img_map = L.map('mapid', map_options);                                   
var aw_image = L.imageOverlay();

var url1 = ".. some pictures url .."
var url2 = ".. some pictures url .."
var url3 = ".. some pictures url .."
var url4 = ".. some pictures url .."


$("button").on("click",function(){
  const ID = $(this).attr("id");
  const url = ID === "btn1" ? url1 : ID === "btn2" ? url2 : ID === 
"btn3" ? url3 : url4;
  $("#pic").one("load",()=>change_pic(url)); 
  $("#pic").attr("src",url);
});

function change_pic(url){
    let {clientWidth : width, clientHeight : height } = $("#pic")[0];
    let bounds = [[0,0],[height, width]];
    //let center = [bounds[1][0]/2, bounds[1][1]/2];

    $("#mapid").css({ "height":`${height}px` });    

    img_map.fitBounds(bounds, {animate:false, pan:false});
    img_map.setMaxBounds(bounds);    
    img_map.invalidateSize(false);
    //img_map.setView(center,0,true);
    aw_image.setUrl(url).setBounds(bounds).addTo(img_map); 
}

And Here is a jsfiddle describing my problem. When switching quickly between the 4 pictures in random order the upper picture comes sometimes with an animation. NB: the bottom picture is just here to quickly get the rescaled height.

Can anyone help me with this?