jQuery outerHeight() et modification de la hauteur scintillement/échec du redimensionnement de la fenêtre sur les pixels impairs

Question

J'ai deux éléments côte à côte sur une page. Un des éléments a une taille fixe (100vh) - .hero-moitié - et l'autre est fluide avec du texte de différentes longueurs - .project-details. Lorsque le conteneur de texte fluide s'étend pour être plus grand que le conteneur d'image, je souhaite lui appliquer une classe qui limite la hauteur de l'un de ses éléments enfants pour ramener la hauteur totale du conteneur de texte à la hauteur de l'image.

HTML:

 <div class="project-details left"> 
      <h1 class="project">Title</h1> 
      <div class="project-summary"> 
      <div class="summary-container"> 
       <p>A bunch of paragraphs here</p> 
      </div> 
      <a class="more" href="#">More</a> 
      <a class="less" href="#">Less</a> 
      </div> 
     </div> 
     <div class="hero hero-half right" style="background-image: url('/img/placeholder-vert1.jpg')"></div> 

Le CSS concerné:

.hero-half { 
    width: 50%; 
    height: 100vh; 
} 

.project-details { 
    width: 50%; 
    height: auto; 
} 

.project-summary .summary-container { 
    overflow: hidden; 

    &.restrict-height { 

    .summary-container { 
     // set max height 
     max-height: calc(100vh - 615px); 
    } 
    } 
} 

Voici mon code JS:

$(function() { 

    var bpTab = 1024; 

    resize = function() { 
    var winWidth = $(window).width(); 
    var heroHeight = $(".hero-half").outerHeight(); 
    var boxHeight = $(".project-details").outerHeight(); 
    var $box = $(".project-summary"); 

    if (boxHeight > heroHeight && winWidth > bpTab) { 
     // if on desktop layout AND if text is pusing box too big, restrict box height 
     $box.addClass("restrict-height"); 
    } else { 
     // if not on desktop or text is not pushing box too big 
     $box.removeClass("restrict-height"); 
     $box.removeClass("is-expanded"); 
    }; 
    }; 

    // resize on window resize 
    $(window).bind("resize orientationchange", function(){ 
    resize(); 
    }); 

    // resize on page load 
    resize(); 
}); 

Ainsi, lorsque le projet-détails div atteint une hauteur plus grande que. half-hero, il ajoute une classe qui définit une hauteur maximale sur l'un des enfants, ce qui ramène la hauteur totale de .project-details à equ al ou moins de .hero-moitié. Cependant, lorsque je redimensionne ma fenêtre pour forcer le texte à pousser le projet - la hauteur des détails est trop grande et déclencher la classe restrict-height, cela ne fonctionne que lorsque la largeur et la hauteur de l'écran sont égales et la hauteur est égale, ou les deux impairs). Si c'est un total impair, la hauteur extérieure des détails du projet semble calculer incorrectement. Le problème, je pense, est que l'outerHeight de .project-details est parfois calculé à sa hauteur naturelle avant que la hauteur du texte ne soit restreinte, et parfois il est calculé après l'application de cette classe et après la hauteur du texte restreint, ce qui diminue la hauteur de détails .project dans une plage acceptable.

J'ai essayé d'ajouter un délai d'attente pour l'ajout de la classe en espérant que le temps supplémentaire signifierait que le calcul de outerHeight était toujours correct, mais cela n'a pas fait de différence.

Comment est-ce que je devrais modifier ce code JS pour m'assurer que les détails .project outerHeight lisent toujours la hauteur avant que la classe restrict-height soit appliquée?

Et connexe: pourquoi les dimensions des pixels impairs auraient-elles un effet ici?

Answer 1

La solution était d'ajouter une réinitialisation avant la boucle if/else pour standardiser la hauteur div d'enlever les classes supplémentaires qui peuvent modifier sa hauteur en premier.

var $box = $(".project-summary"); 

// reset 
$box.removeClass("restrict-height"); 
$box.removeClass("is-expanded"); 

var winWidth = $(window).width(); 
var heroHeight = $(".hero-half").outerHeight(); 
var boxHeight = $(".project-details").outerHeight();