Непоследовательное поведение box-shadow с переходом - PullRequest
Новая
       20

Непоследовательное поведение box-shadow с переходом

0 голосов
/ 16 января 2019

У меня есть кнопка, которая получит box-shadow на hover. Он также имеет transition. Моя проблема в том, что он не всегда отображает один и тот же результат, иногда box-shadow будет смещен на несколько пикселей и не будет одинаковым со всех сторон, как показано на изображении:

enter image description here

Ниже мой код, а вот JSFiddle демо. 

div{
  width:100px;
  height:25px;
  transition:.2s;
  background:lightgrey;
  border-radius:25px;
}

div:hover{
  box-shadow:0px 0px 10px green;
}
<div></div>

Как вы можете видеть, если вы удалите transition, box-shadow будет отображаться правильно. 

div{
  width:100px;
  height:25px;
  background:lightgrey;
  border-radius:25px;
}

div:hover{
  box-shadow:0px 0px 10px green;
}
<div></div>

Что еще более интересно для меня, так это то, что демонстрационная программа JSFiddle будет отображать различные выходные данные после удаления и вставки некоторого кода, сохраняя его без изменений в общем, или снова выполняя тот же код, или уменьшая время перехода. Мне сложно объяснить, как воспроизвести это, но вы можете увидеть это сами, если немного поиграете. Мой вопрос заключается в том, как обеспечить его согласованность и, самое главное, как сохранить box-shadow равным при сохранении перехода.

@ редактировать

Видео выпуска

Также я снял видео о том, как я вижу различия, поскольку некоторые люди сообщили, что не видят никаких проблем. Возможно ли это как-то по вине моего экрана? (Надеюсь, проблема видна на видео или, может быть, я просто схожу с ума)

@ edit2

Кажется, это проблема браузера. Первоначально я столкнулся с проблемой в последней версии Chrome, не мог воспроизвести проблему в последней версии Firefox. Узнав, что благодаря комментариям я добавил префиксы webkit к transition и box-shadow, но это не решило проблему.

1 Ответ

0 голосов
/ 16 января 2019

Как вы сказали, это кажется ошибкой, но для преодоления этого вы можете сделать это по-другому, используя псевдоэлемент, в котором вы применяете box-shadow, но вы анимируете другое свойство (масштаб, прозрачность, ширина / высота и т. Д.) 

div.box{
  width:100px;
  height:25px;
  margin:10px;
  background:lightgrey;
  border-radius:25px;
  position:relative;
}
div.box::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  box-shadow:0 0 10px green;
  border-radius:inherit;
  transition:.2s;
  transform:scale(0.8);
}

div.box:hover::before{
  transform:scale(1);
}
<div class="box"></div>
...