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图像进入可视区域时，它会重新绘制图像。我建议：

我看到你正在加载一堆在页面上看不到的图像。
您的所有图片均未进行优化/调整大小。保存图像时，尽量不要让它们比页面中显示的图像大得多。
可以使用CSS或SVG实现有角度的颜色png。（看看：http://apps.eky.hk/css-triangle-generator/）

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

滚动/加载问题谷歌Chrome / Opera

1 个答案: