视差图像在 Safari 上闪烁

Question

我在Safari上滚动视差图像时遇到问题。 该网站在Chrome和Firefox上运行良好。

我确实尝试减小图像大小，但这不起作用。

我的css：

background-image: url(../images/03-clinical-trials/bg-clinical-trials-01.jpg);
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
padding-bottom: 64px;
background-attachment: fixed;

页面链接为： https://www.amramedical.com/clinical-trials

任何建议将不胜感激。

Answer 1

这可能是由于background-attachment: fixed;样式，每当用户滚动时，它都会导致重新绘制。

一种解决方案是将包含固定背景图像的元素移动到其自己的伪元素，并使用will-change: transform属性。大致如下：

.left-right-boxes-clinical {
padding-bottom: 64px;
overflow: hidden;
position: relative;
}
.left-right-boxes-clinical::before {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
position: fixed;
background-image: url(../images/03-clinical-trials/bg-clinical-trials-01.jpg);
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
/* This is the important part */
will-change: transform; 
}