Div «мерцает» на прокрутке страницы / окна в браузере Safari

Question

Попытка исправить "мерцание" div при прокрутке страницы в браузере Safari (версия 12.0.2 в macOS High Sierra), но не понимаю, почему это происходит, также я пытался исправить это с помощью методов CSS, например transformZ(0), webkit-backface-visibility: hidden, webkit-transform-style: preserve-3d, will-change: top, но это не помогает, есть идеи? Спасибо!

var scroll = document.getElementById('scroll').style;
window.onscroll = function () {
  scroll.top = middleOfScreen();
};

var raf = document.getElementById('raf').style;
requestAnimationFrame(function setRaf () {
  raf.top = middleOfScreen();
  requestAnimationFrame(setRaf);
});
  
function middleOfScreen() {
  return window.pageYOffset + window.innerHeight/2 + 'px';
}

body {
  height: 20000px;
  margin: 0;
  font-family: sans-serif;
  text-align: center;
}
div {
  width: 23%;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 1em 0;
}
div:nth-child(2n) {
  background-color: rgba(0, 0, 0, 0.4);
}
#static {
  position: absolute;
  left: 0;
}
#scroll {
  position: absolute;
  left: 24%;
}
#raf {
  position: absolute;
  left: 48%;
}
#css {
  position: fixed;
  right: 0;
}

<div id=static>position:static</div>
<div id=scroll>set to top:50% onScroll</div>
<div id=raf>set to top:50% on requestAnimationFrame</div>
<div id=css>posision:fixed </div>

также Codepen

Answer 1

Зачем вам нужно устанавливать вершину каждый раз, когда срабатывает событие прокрутки? Похоже, что установка верхнего значения влияет на мерцание. Если вы хотите прослушать прокрутку и установить top в любом случае, поэтому я предлагаю использовать throttle, чтобы ваши слушатели событий делали это только один раз.