Странное поведение с Chrome + position:fixed + background-attachment:fixed

Об этой проблеме несколько раз сообщалось на SO и в других местах, но я не смог найти никакого работающего решения.

Если у вас есть div с фиксированным положением и фиксированным прикрепленным фоном, в некоторых конкретных условиях рендеринг в Google Chrome дает сбой (проверено без проблем в Firefox и IE11).

Я сделал код ниже, чтобы проиллюстрировать проблему: https://codepen.io/EricRondo/pen/PaENpe< /а>

Как видите, только в Chrome фон не покрывает весь div, высота которого должна составлять 400 пикселей.

Эффект зависит от «верхней» позиции. Вот что происходит, когда верхняя часть увеличивается на 50 пикселей: https://codepen.io/EricRondo/pen/WydwMW< /а>

Я добавил еще один div с определенной высотой, потому что без прокрутки на самом деле нет проблем. Очень странно !

Я столкнулся со многими решениями, такими как:

-webkit-transform: translateZ(0);

Но хотя в «некоторых» случаях это работает, включая описанные выше коды, в моей ситуации это не работает, поскольку в ней задействовано гораздо больше контейнеров и JS-кода. Но корень проблемы, по сути, один и тот же: это происходит только тогда, когда div с фиксированным положением имеет background-attachment:fixed.

Полный веб-сайт с проблемой находится здесь: http://reims.dev-indelebil.com/

Нет проблем с Firefox: чистый и плавный эффект параллакса, но с Chrome происходит это странное поведение. При добавлении translateZ(0) или любых других «трюков с графическим процессором» в контейнеры все становится запаздывающим / дергающимся, что далеко от исключенного поведения.

Заранее спасибо за любой совет или решение!


google-chrome css css-position background-attachment
person eric.rondo    schedule 18.06.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я дурачился с этим и придумал это, я не уверен, что это сработает в вашей конкретной ситуации:

https://codepen.io/anon/pen/ERogXM

.fixed {
  position:fixed;
}
.elt {
  position:fixed;
  top:250px;
}

Затем:

<div class="fixed">
  <div class="elt"></div>
</div>

В основном, обертывание div .elt в div-контейнере, который также имеет положение: фиксированное. Он работает в codepen, но не уверен, что он будет работать в вашей конкретной ситуации на реальном сайте...

person emmzee    schedule 18.06.2018
comment
Жаль не повезло с этим. Даже в вашей кодовой ручке, если вы прокрутите вниз, вы увидите, что фон исчезает... - person eric.rondo; 19.06.2018