javascript - Safari 浏览器中页面/窗口滚动时出现 Div “flickers”

Question

尝试修复 Safari 浏览器中页面滚动时的 div“闪烁”(macOS High Sierra 上的版本 12.0.2)，但不明白为什么会发生这种情况，我也尝试通过 CSS 方法修复此问题，例如transformZ(0)、webkit-backface-visibility:隐藏、webkit-transform-style:preserve-3d、will-change :顶部，但这没有帮助，有什么想法吗？谢谢!

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

为什么每次滚动事件触发时都需要设置顶部？看来设置最高值会影响闪烁。如果您想在滚动时监听并设置顶部，那么我建议使用 throttle ，这样您的事件监听器只会执行一次。