В chrome моя анимация выбора CSS больше не работает, если не переопределена граница - PullRequest
0 голосов
/ 05 августа 2020

Это похоже на то, что начало происходить с версией 83 Chrome.

В этом JSFiddle фон выбора должен исчезнуть с красного на белый при первой загрузке страницы. Однако по какой-то причине я обнаружил, что это работает только тогда, когда свойство границы переопределено (раскомментируйте эту строку в CSS, чтобы увидеть это в действии).

https://jsfiddle.net/nqfdx9ug/

HTML:

<select class="highlight-and-fade">
    <option>---Select---</option>
    <option>hi</option>
    <option>hello</option>
</select>

CSS:

select {
  width: 120px;
  
  /* Uncomment below to fix the animation */
  /* border: 1px solid black; */
}
        
.highlight-and-fade {
  animation: highlightAndFade 3s linear;
}

@keyframes highlightAndFade {
  0% {
    background-color: red;
  }
  100% {
    background-color: white;
  }
}

Кто-нибудь знает, что изменилось и почему, или есть ли менее хакерский обходной путь? Firefox не имеет этой проблемы для меня, как и Chrome версия 81. Спасибо!

1 Ответ

0 голосов
/ 06 августа 2020

Google Chrome - Версия 84.0.4147.105 (официальная сборка) (64-разрядная версия) У меня это отлично работает без обходного пути с границами. Возможно, ваш браузер хранит кеш и поэтому он не отображается должным образом ( здесь - это как очистить кеш)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...