Firefox: первый раз зависания Blink

Question

Я пытаюсь изменить фоновое изображение элемента при наведении курсора, и в Chrome все работает отлично. Но в Firefox он всегда мигает / мигает в течение доли секунды при самом первом наведении после загрузки страницы.

Я уже предварительно загрузил изображения, необходимые для body:after, и консоль разработчика в Firefox показывает, что существует запрос «GET» для рассматриваемого файла. И все же он не готов к визуализации при первом наведении мыши.

Так я предварительно загружаю изображение.

body:after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    content: url(image.png);
}

Я не понимаю, почему он работает безупречно в Chrome, но Firefox производит мерцание впервые, независимо от предварительной загрузки или нет. Я знаю о спрайтах изображений, но в моем случае это невозможно.

Answer 1

Даже если он уже загружен с сервера, если будет видна какая-то дополнительная задержка, я бы вместо этого поместил оба изображения (в стеке или рядом) в одно изображение, также называемое spritesheet.

Затем при наведениисдвиньте положение фона, чтобы показать вторую половину изображения.

Например, если каждое изображение имеет размер 50x50, вы можете сделать одно изображение 100x50 с обоими рядом.Пусть в нормальном состоянии отображается только левая половина (сохраняя ширину элемента равной 50 и положение фона 0 0), а затем передвиньте фон на 50 пикселей влево при наведении, чтобы открыть правую половину:

background-position: -50px 0;