javascript - Stellar.js 视差元素在 Safari 上抖动?

标签 javascript safari parallax

我知道以前有人问过这个问题,但我尝试过修复背景图像,但没有帮助。

You can view the problem here when you scroll down to the thumbnail gallery.

我真的不知道问题是什么,但这里是抖动背景的代码:

#content1 {
  background: #395668 url(../img/studio-9.jpg) fixed no-repeat center;
  padding-top: 120px;
  padding-bottom: 120px;
}

#gallery {
  background: url(../img/studio-8.jpg) fixed no-repeat center;
  padding-top: 160px;
  padding-bottom: 160px;
}

知道发生了什么吗?在 Chrome 中看起来不错,在 Firefox 中看起来不错。

最佳答案

不幸的是,这与您的编码无关,而是与浏览器本身有关,因为 Safari 对鼠标滚动的 react 与 Firefox 和 Chrome 非常不同。

Firefox 和 Chrome 在整个滚动过程中跟踪鼠标滚动,这就是视差有效的原因。

但是,在 Safari 中,鼠标滚动位置只有在用户完成滚动后才会更新,这就是导致抖动效果的原因。

唯一的选择是为 Safari 用户禁用视差效果。

关于javascript - Stellar.js 视差元素在 Safari 上抖动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18364405/

相关文章:

javascript - css/js 将固定元素上的滚动事件委托(delegate)给它们下面的元素

javascript - 如何使用 AJAX 将字节数组发送到服务器端

javascript - 用于更新 mysql 中字段的 Jtable.org 自定义按钮 onclick

html - Safari 错误边距 - 在 Chrome 和 FF 中工作正常

ios - WKWebView 中的调整大小处理程序中的 window.innerWidth/Height 未更新

javascript - 我可以为这个视差功能添加轮播吗?

javascript - Skrollr - 如何在到达顶部窗口时停止 div 停止滚动

javascript - 将 mysql_fetch_array 中的 php 数据保存为脚本变量

javascript - Promise.all 与 Promise 链中的 x => Promise.all(x) 有什么区别?

sql - 将 SQLite SQL 文件导入 WEB SQL 数据库的最简单方法是什么