javascript - 在具有视差效果的滚动时在 Safari 中抖动
问题描述
使用 Chrome 和 Firefox 我没有这个问题,只有 Safari 甚至技术预览版都有这个问题。
我制作了 CodePen,它会在滚动时显示测试框在 Safari 中抖动。
https://codepen.io/MariusZMM/pen/bOWaGj
.box {
transform: translateY(var(--translateY));
}
.title {
position: relative;
text-align: center;
color: rgb(255, 255, 255);
margin: auto 0;
bottom: -200px;
background-color: rgba(0, 0, 0, 0.3);
padding: 10px 40px;
border: 1px solid #00000081;
}
.parallax_cover {
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 100%;
}
.pic1 {
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* When disabling this i get jitter in Chrome to */
background-attachment: fixed;
}
.pic1 {
background-image: url('https://images.pexels.com/photos/1563355/pexels-photo-1563355.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
min-height: 100%;
}
解决方案
推荐阅读
- sql-server - 哪个数据库在 SQL Server 中存储 sys.tables 或 sys.indexes?
- javascript - 当我删除错误变量上传停止工作
- python - python程序中的简单列表不会产生结果
- arduino - arduino 库在定制 pcb 上是否兼容?
- python - 字母表中的下一个字母
- android - 是否可以在 react-native 中创建基于客户端工作空间的应用程序?
- docker - 如何为 Docker postgres 实例指定不同的端口?
- r - 使用 dplyr 过滤闪亮的数据表输出
- apache-kafka - 将整个kafka主题具体化为rocksdb
- arrays - 如何使用多个数组变量运行 ansible 任务?