Я немного исследовал и не могу решить эту проблему.Отображается только в Safari (Mac и iOS).Работает на Chrome, FF, Edge и т. Д.
ОБНОВЛЕНИЕ: Мерцание также происходит в FireFox ...
Я использую API IntersectionObserver вместе стребуется полифайл для ленивой загрузки изображений.Когда они появляются, наблюдатель пересечения заменяет изображение с низким разрешением, установленное как background-image, и заменяет его изображением с высоким разрешением, хранящимся в атрибуте данных в div.
Поведение «работает» какисходное размытое изображение устанавливается, а затем заменяется высококачественным, но между ними возникает мерцание или вспышка белого цвета (фон страницы белый, поэтому, может быть, это то, что просвечивает?)
После прочтения: ( Как предотвратить мерцание фонового изображения при изменении ) Я исправил проблему с перескоком, предварительно загрузив изображения с помощью new Image() consructor.
const setBackgroundImage = (e) => {
let image = new Image();
image.onload = () => e.style.backgroundImage = `url(${e.dataset.bgImage})`;
image.src = e.dataset.bgImage;
};
Пример HTMLelement (PHP):
<div class="my-div"
style="background-image: url('<?= $imagePreload ?? $image; ?>');"
data-bg-image="<?= $image; ?>"
</div>
Я пытался поиграть с backface-visibility: hidden, но безуспешно.Я ничего не оживляю, просто заменяю src на div предварительно загруженным полноразмерным изображением.