Проблемы с прокруткой / загрузкой Google Chrome/Opera

Question

Я работал над своим веб-сайтом, и он работает безупречно в Firefox и Safari (также нет проблем с прокруткой в ​​IE), но он открыт как в Opera, так и в Chrome, и сайт продолжает перезагружать каждую область каждый раз, когда вы немного прокручиваете, поэтому, когда вы ' загрузив область, вы прокручиваете до новой (что странно загружается) и снова возвращаетесь в первое место, где все заново загружается. Я обнаружил, что проблемы возникают из-за фона, который я использую, но, опять же, в половине браузеров он работает безупречно. Кто-нибудь знает, как заставить этот код работать? Я пытался изменить свойство абсолютного вложения на фиксированное и относительное, но фиксированное только делает сайт более ужасным, а относительное - таким же, как абсолютное.

Или... возможно ли добавить CSS, специфичный для Firefox, IE и Safari, чтобы убедиться, что он там работает, и удалить фоновое изображение в других браузерах?

.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

Основная проблема, с которой вы сталкиваетесь, заключается в том, что ваша страница (изображения, видео) имеет большой размер (24 МБ). Chrome перерисовывает изображения, когда они попадают в видимую область. Я бы порекомендовал:

1. Я вижу, вы загружаете кучу изображений, которые не видны на странице.
2. Ни одно из ваших изображений не оптимизировано / не изменено. При сохранении ваших изображений старайтесь не делать их намного больше, чем они отображаются на странице.
3. Угловые цвета PNG, вероятно, могут быть достигнуты с помощью CSS или SVG. (Посмотрите на: http://apps.eky.hk/css-triangle-generator/)

Я не могу сказать вам, почему Firefox и Safari намного лучше (за исключением того, что они отображаются по-разному). Изображения технически не перезагружаются, но их нужно декодировать и рисовать на странице при прокрутке. Некоторая общая информация о свитке Дженке может быть найдена здесь: http://jankfree.org/