Safari瀏覽器的頁面/窗口滾動中的Div“閃爍”

Question

試圖修復Safari瀏覽器中的頁面滾動上的div“閃爍”（在macOS High Sierra上為ver 12.0.2），但不明白為什么會發生這種情況，我也試圖通過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

為什么每次滾動事件觸發時都需要置頂？ 似乎設置最高值會影響閃爍。 如果您想以滾動方式收聽並設置頂部，那么我建議使用節流閥，這樣您的事件偵聽器將只執行一次。