jquery - 使用 jQuery 和固定背景图像在 Safari 上滚动抖动

Question

在这个 Joomla 网站上，我在以下情况下遇到滚动抖动：

(1) 具有固定的背景图像。

(2) 在 Safari 中

(3) 并启用 jquery。

如果我删除这些变量中的任何一个，滚动就会很好而且很流畅。也就是说，如果我制作背景图片附件：滚动，或者如果我在 Firefox 或 Chrome 中测试该站点，或者如果我禁用 jquery，那么滚动就会变得非常流畅。

我在 MacBook Pro (OSX 10.15.1) 上运行所有浏览器的最新版本。如果我使用带有鼠标滚轮的鼠标，滚动抖动就不太明显了，但是当我使用触控板时，它就很糟糕了。

当我使用 Safari 的检查器尝试诊断问题时，我可以通过在“滚动”或“滚动”事件侦听器下插入断点来解决问题，但由于我不知道 javascript，所以我不知道是什么具体问题是。

也许它与这个一般问题有关：https ://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects 。

当我完全删除我的 custom.js 文件时，问题并没有消失。但是当我删除 jquery 时，问题确实消失了。显然，jquery 与固定背景图像和 Safari 交互的方式是导致问题的原因。

任何指针将不胜感激。我只是一个初学者，边走边学，所以如果问题不合适或提出错误，请原谅。

更新：我忘了提到背景图像只是附件：固定在视口宽度≥ 768px。在 767px 及以下，它们成为附件：滚动。

更新：我将致力于使用AOS而不是 JS + jQuery 实现滚动效果。然后我将能够完全删除 jQuery 并查看是否可以解决问题。与此同时，如果有人能回答上面的问题，我会让 jQuery 保持活动状态。

11/21 更新：我用AOS完成了滚动效果的实现。不幸的是，我的 Joomla 模板使用了 jQuery，所以我不能完全删除它。但是，在使用固定背景图像进行视差滚动的专业演示（相关文章在此处）中发现 Safari 中出现相同类型的抖动后，我感觉好多了。抖动不那么严重并且最终会变得平滑，但它仍然很明显。因此，我试图解决的问题似乎是一个普遍问题，目前可能无法完美解决。

标签： jquerysafaribackground-imagejitter