Браузер загружает фоновое изображение (устанавливается с помощью переменных CSS) каждый раз при обновлении стиля, почему? - PullRequest
Новая
       30

Браузер загружает фоновое изображение (устанавливается с помощью переменных CSS) каждый раз при обновлении стиля, почему?

3 голосов
/ 12 июня 2019

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

Это происходит на Mac Chrome 74 и Safari. Firefox кажется в порядке.

Кнопки оформлены с использованием background-image с переменными CSS, код выглядит следующим образом: 

body {
    --src-image: url("some image");
}

.btn {
    background-image: var(--src-image);
}

.btn:hover {
    opacity: 0.7;
}

Codepen: https://codepen.io/polyamide/pen/qzEVzO

Репро шаги:

  1. Откройте DevTool и отключите кеш.
  2. Включите и выключите второе изображение (это с использованием переменной CSS, а первое - нет).
  3. См. Сетевую панель. При обновлении стиля будет новый запрос.

Избегайте использования переменной css, чтобы решить проблему, но я все еще хочу понять, почему это происходит, и как я могу это исправить?

...