带有jQuery和固定背景图片的Safari上的滚动抖动

问题描述 投票:1回答:1

this Joomla site上,在以下情况下我出现滚动抖动:

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

[(2)在Safari中

((3)并且启用了jquery。

如果删除这些变量中的任何一个,滚动都将流畅而流畅。就是说,如果我将背景图像设置为attach:scroll,或者如果我在Firefox或Chrome中测试该网站,或者如果我禁用了jquery,则滚动将变得顺畅而流畅。

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

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

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

当我完全删除custom.js文件时,问题就不会消失。但是当我删除jquery时,问题确实消失了。显然,jquery与固定背景图片和Safari交互的方式有一些问题。

任何指针将不胜感激。我只是一个初学者,正在学习中,所以,如果问题不正确或提出的问题不好,请原谅。

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

Update:我将使用AOS而不是JS + jQuery实现滚动效果。然后,我将能够完全删除jQuery,看看是否可以解决问题。同时,如果有人可以回答上面的问题,我将使jQuery保持活动状态。

Update 11/21:我用AOS完成了滚动效果的实现。不幸的是,事实证明我的Joomla模板使用jQuery,因此无法完全将其删除。但是,在以固定背景图像(关联文章为this professional demo)进行视差滚动的here时,在Safari中发现了同样的抖动之后,我感觉会更好。抖动不那么严重,最终可以消除,但是仍然很明显。因此,看来我要解决的问题是一个普遍的问题,目前可能无法完美解决。

jquery safari background-image jitter
1个回答
0
投票

与我网站上元素固定的背景完全相同的Safari抖动灾难。

我一直在网上搜索了几个小时,希望能找到解决方案,但似乎只是我,您对此一无所知?...感谢jQuery的带头人!会朝那个方向钻...

© www.soinside.com 2019 - 2024. All rights reserved.