В фоновых изображениях Chrome с пользовательскими свойствами CSS мерцание внутри тега привязки - PullRequest
Новая
       29

В фоновых изображениях Chrome с пользовательскими свойствами CSS мерцание внутри тега привязки

1 голос
/ 30 мая 2019

Я использую пользовательские свойства CSS, чтобы установить фоновое изображение для div. Div вложен внутри тега привязки, чтобы представить кликабельную «карточку», которая перенаправляет на другую страницу.

В Chrome с открытыми инструментами разработчика и отключенным кэшированием, когда я нажимаю на карту, фоновое изображение мерцает. Кажется, что изображение извлекается снова каждый раз, когда изменяется состояние тега привязки.

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

CSS выглядит так: 

:root {
  --image-url: url("https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80")
}

.image-div {
  height: 100px;
  width: 100px;
  background-image: var(--image-url);
  background-position: 0;
  background-size: cover;
}

см. Перо: https://codepen.io/hally9k/pen/RmepVe

...