Safari Translate3d 因滚动事件而滞后

Question

我在 Javascript 中使用滚动事件侦听器在滚动完成时手动定位元素。

myContainerElement.addEventListener('scroll', function (e) {
  const transform = 'translate3d(' + this.scrollLeft + 'px,0,0)';
  scrollMyElement(transform);
});

请注意，这scrollMyElement只是将变换添加到元素的样式中。这在 Firefox 和 Chrome 上效果很好，但我在 Safari 上遇到了问题。使用滚轮/触摸板或滚动条，滚动时元素似乎落后于页面的其余部分。

我能够通过以下解决方案解决鼠标滚轮/触摸板的这个问题：DOM元素位置滚动时缓慢+滚动条滚动和鼠标/触摸板滚动之间的差异

因此，在 Safari 中，现在使用鼠标滚轮/触摸板效果很好，但在使用滚动条时仍然滞后（就像上面发布的解决方案中的示例）。我怎样才能解决这个问题？！

我尝试过的事情：

1. -webkit-perspective: 1000; -webkit-backface-visibility: hidden;
2. -webkit-transform: translate3d(0,0,0)另外为了性能
3. 使用所有供应商前缀转换，例如 webkit、moz、o、ms。