滚动/加载问题 Google Chrome/Opera

Question

我一直在我的网站上工作，它在 Firefox 和 Safari 中完美运行（IE 也没有滚动问题），但它在 Opera 和 Chrome 中都打开了，每次滚动时网站都会重新加载每个区域所以当您加载一个区域时，您滚动到一个新区域（加载奇怪）并再次返回到第一个位置，它会再次重新加载所有内容。我发现问题来自我使用的背景，但再一次，在一半的浏览器中它可以完美运行。有人知道如何让这段代码工作吗？我尝试将绝对附件属性更改为固定和相对，但固定只会使网站工作更糟糕，相对与绝对相同。

或者...是否可以为 Firefox、IE 和 Safari 添加特定的 css 以确保它在那里工作并删除其他浏览器中的背景图像？

.div-1{
    background: url(../images/blue1.png), url(../images/background.jpg);
    background-attachment: absolute, absolute;
    background-position: left bottom, right top;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-color:#000;
    color: #fff;
    text-align: center;
    padding:  10% 10% 30% 10%;
    border-bottom: 5px #000;
}

.div-2{
    background: url(../images/blue1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: absolute;
    background-position: left bottom;
    background-color:#000;
    color: #95C8D1;
    text-align: center;
    padding:  10% 10% 30% 10%;
    border-bottom: 5px #95C8D1;
    margin-top: -2px;
}

.div-3{
    background: url(../images/black1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: absolute;
    background-position: right bottom;
    background-color:#95C8D1;
    color: #fff;
    text-align: center;
    padding:  10% 10% 30% 10%;
    border-bottom: 5px #000;
    margin-top: -1px;
}

关于网站：http://cdmolenaar.nl/en/

Answer 1

您面临的主要问题是您的页面（图片、视频）非常庞大 (24MB)。当图像进入可视区域时，Chrome 会重新绘制图像。我建议：

1. 我看到您正在加载一堆在页面上不可见的图像。
2. 您的所有图像都没有经过优化/调整大小。保存图片时，尽量不要让它们比页面中显示的大太多。
3. 有角度的彩色 png 可能可以使用 CSS 或 SVG 实现。 （看一下：http://apps.eky.hk/css-triangle-generator/）

我无法告诉你为什么 Firefox 和 Safari 会好很多（除了它们的呈现方式不同）。这些图像在技术上并没有重新加载，但它们确实需要被解码并在滚动时绘制到页面上。可以在此处找到有关 scroll Jank 的一些一般信息：http://jankfree.org/