javascript - jQueryのouterHeight（）と高さの変更ちらつき/ウィンドウのサイズ変更で奇数ピクセルに失敗する

Question

ページに 2 つの要素が並んでいます。1 つの要素は固定サイズ (100vh) – .hero-half – で、もう 1 つの要素は可変長のテキスト – .project-detailsです。Fluid テキスト コンテナーが拡張されて画像コンテナーよりも高くなった場合、その子要素の 1 つの高さを制限してテキスト コンテナーの高さの合計を画像の高さと等しくなるように制限するクラスをコンテナーに適用したいと考えています。

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>

関連する CSS:

.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);
    }
  }
}

これが私の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();
});

したがって、project-details div が .hero-half よりも高い高さに達すると、子の 1 つに max-height を設定するクラスが追加され、.project-details の合計の高さが .project-details 以下に戻ります。半分のヒーロー。

ただし、ウィンドウのサイズを変更してテキストを強制的にプロジェクトの詳細の高さを高くしすぎて、restrict-height クラスをトリガーすると、画面の幅と高さが偶数になる場合にのみ機能します (幅と高さの両方が偶数の場合)。 、または両方が奇数)。合計が奇数の場合、project-details の outerHeight が正しく計算されないようです。

問題は、.project-details の outerHeight が、制限されたテキストの高さの前の自然な高さで計算されることがあり、そのクラスが適用された後、制限されたテキストの高さの後に計算されることがあるということです。 .project-details の高さを許容範囲に戻します。

余分な時間がouterHeightの計算が常に正しいことを意味することを期待して、クラスの追加にタイムアウト遅延を追加しようとしましたが、違いはありませんでした。

この JS コードを変更して、restrict-height クラスが適用される前に .project-details outerHeight が常に高さを読み取っていることを確認するにはどうすればよいですか?

関連：奇数のピクセル寸法がここで影響を与えるのはなぜですか?