jQuery outerHeight() и изменение высоты мерцание / сбой при изменении размера окна до нечетных пикселей

Question

У меня есть два элемента рядом на странице. Один элемент имеет фиксированный размер (100vh) - .hero-half - а другой является жидким с текстом различной длины - .project-details. Когда текучий текстовый контейнер расширяется, чтобы быть выше контейнера изображений, я хочу применить к нему класс, который ограничивает высоту одного из его дочерних элементов, возвращая общую высоту текстового контейнера обратно равной высоте изображения.

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

Таким образом, когда div проектных деталей достигает высоты выше, чем.hero-half, он добавляет класс, который устанавливает максимальную высоту для одного из дочерних элементов, что возвращает общую высоту.project-details обратно равной или меньшей, чем. герой-полтора.

Однако, когда я изменяю размер своего окна, чтобы заставить текст задвинуть высоту деталей проекта слишком высоко и вызвать класс restrict-height, это работает, только когда ширина экрана и высота складываются до четных чисел (и ширина, и высота равны или оба странные). Если это нечетная сумма, то externalHeight деталей проекта, похоже, вычисляется неправильно.

Проблема, я думаю, заключается в том, что externalHeight.project-details иногда вычисляется на своей естественной высоте до высоты текста, которую он ограничил, а иногда он вычисляется после применения этого класса и после высоты текста, которую он ограничил, что для этого уменьшает высоту.project-details обратно в приемлемый диапазон.

Я попытался добавить задержку тайм-аута для добавления класса, надеясь, что дополнительное время будет означать, что вычисление externalHeight всегда будет правильным, но это не имеет значения.

Как мне изменить этот код JS, чтобы убедиться, что.project-details outerHeight всегда считывает высоту до применения класса restrict-height?

И связанный с этим: почему нечетные размеры в пикселях будут иметь какое-либо влияние здесь?

Answer 1

Решением было добавить сброс перед циклом if/else, чтобы стандартизировать высоту div, удалив дополнительные классы, которые могут сначала изменить его высоту.

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();