Exécution sous chrome

Bonjour,

Mon problème est assez étrange et je n'ai rien trouvé sur le net ressemblant à ça. La fonction callback de show() s'éxecute avant d'avoir fini de chargé l'objet jQuery qui appelle show(), sous firefox/edge aucun soucis. Par contre sur Chrome je ne comprend pas, il l'éxcute correctemet le script mais une fois tout les 5 rafraichissements... D'où l'utilisation la fonction setTimeout de 200ms. J'espère que vous comprendrez avec cet exemple :

    /css

    .main{
        position : relative;
        height : 0px;
        width: 100%;
    }

    section{
        display: none;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
    }

    /js

    $(document).ready(function(){

           activeItem = {
               activeItem : 'informations',
               subcat : 'compte'
           };

          $ctn = $('section#ctn'+capitalizeFirstLetter(activeItem.subcat));
          $ctn.css('opacity', 1);

          setTimeout(function(){ // ***** CHROME *******
              $ctn.show(function(){
                  height = $ctn.outerHeight(true); // height recuperer de l'objet en absolute
                 // La valeur height varie selon les rafraichissements
                 console.log('height apres show', height, $ctn.outerHeight(true), $ctn.height());
                 $('.main').height(height); // Le main est redimensionner en conséquence
                 height = $('.main').innerHeight(); // Du coup une dimension tronqué
              }).promise().done(function(){
                  console.log('show est fini');
              });
          }, 400);
        });

Ce que je fais

Le but du code : adapter la hauteur du .main par rapport à un item placé en absolute (son contenu est généré en PHP)

Recuper un container ($ctn = #ctnInformations) puis mettre son opacity à 1

$ctn = $('section#ctn'+capitalizeFirstLetter(activeItem.subcat));
$ctn.css('opacity', 1);

Puis lui appliquer la fonction show() et récupérer ses dimensions

 setTimeout(function(){ // FUCKIN CHROME *******
     $ctn.show(function(){
             height = $ctn.outerHeight(true); // height recuperer de l'objet en absolute
              // La valeur height varie selon les rafraichissements
             console.log('height apres show', height, $ctn.outerHeight(true), $ctn.height());
             $('.main').height(height); // Main est redimensionner en conséquence
             height = $('section').innerHeight(); // Du coup une dimension tronqué
         }).promise().done(function(){
             console.log('show est fini');
         });
     });
   }, 400);

Ce que je veux

Exécuter le script sans TimeOut sur Chrome

Ce que j'obtiens

Si vous enlevez le setTimeout : chrome exécute trop vite le code. Firefox et Edge pas de problème.