Проблема прокрутки мерцания (Safari / Firefox) для фиксированного логотипа

Question

Я пытаюсь преодолеть проблему мерцания, которая возникает только в Safari / Firefox (не в Chrome).У меня есть длинная прокрутка страницы, логотип с фиксированной позицией, который после перехода к следующему разделу меняется на логотип с абсолютной позицией, который ведет себя как фиксированный с помощью jquery (вы можете посмотреть здесь ).Проблема в том, что jquery вычисляет смещение вершины при прокрутке, но кажется, что он не в состоянии идти в ногу со свитком, и логотип сильно мерцает.он меняется, но по какой-то причине не в той же скорости прокрутки.

Я также попробовал другое решение, используя .css (transform, traslateY ()) вместо .css ("top") (ex здесь ), но все равно показывает тот же результат.

Код:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

function logoSwitch () {
  $('.altLogo').each(function() {

    var diff = $(".startLogo, .postLogo").offset().top -  $(this).closest('.row').offset().top ;

    $(this).css('top' , '0px')
    $(this).css('-webkit-transform' , 'translateY(' + diff + 'px)')

  });
};

$(document).scroll(function() {logoSwitch();});

logoSwitch();

* {
  padding: 0px;
  margin: 0;
}

.rowstart {
  min-height: 200vh;
  overflow: hidden;
  position: relative;
  width: 100%;
  background-color:        
  rgba(0,110,220,0.4);

}
.row {
  min-height: 200vh;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.blu {
  color: rgba(0,110,220,1);
}

.azul {
  background: #E8F2FC;
}

.logo {
  font-family: "Europa-Bold";
  font-size: 50px;
  top: 20px;
  left: 20px;
  line-height:100%; 
  text-align: left;
  height:60px;
}

.startLogo {
  position: fixed;
}

.altLogo {
  position: absolute;
 -webkit-will-change:transform;
}

.white {
  color: white;
}

<div class="rowstart">

  <div class="logo white startLogo">GIVE A SHIT <br>
    <div class="mission">
    MISSION 
    </div>
  </div> 


</div>


<div class="row azul">

  <h1 class="logo blu altLogo">GIVE A SHIT <br>
   WATER 
  </h1>


</div>