在Safari中滚动时，相对定位的div会抖动

Question

在下面的小提琴中，滚动时会出现明显的抖动。只有在Mac上的Safari中才会注意到抖动，而Chrome和Firefox会平滑地滚动页面。

https://jsfiddle.net/saptarshi17/akxuLL9x/

抖动是对第一段应用视差效果的结果。通过动态计算scroll事件触发的mousewheel css属性来实现视差。我在Mac OSX El Capitan上注意到这一点，不确定Windows。

到目前为止，我试过了：

1. 根据this accepted answer在scroll上添加css("top", ...)事件监听器以及requestAnimationFrame()。
2. 尝试在relative
中包装absolute函数调用
3. 将div从preserve3d更改为{{1}}以避免代价高昂的回流。
4. 根据SO上的某些评论，将{{1}}属性添加到“硬件加速”位置计算中。

由于2和3没有帮助，我认为核心问题与Safari的滚动实现有很大关系，而与帧速率优化有关。延迟Safari的预测渲染和随后的处理程序调用会抵消位置。这导致2次渲染导致抖动。虽然我理解Safari在大多数情况下第一次渲染背后的意图，但在开发人员想要覆盖定位的情况下，这似乎是错误的。也许有办法告诉Safari禁用预测渲染。