Box-shadow в Firefox обрезается на 50px для тега button

Question

Обнаружил интересный баг у Firefox (у меня версия 122.0.1 64bit). Суть в том, что элементу button невозможно установить тень шириной более 50 пикселей. Если заменить button на div - все ок, в других (Chrome, Edge) браузерах с button все ок. В принципе, как побороть понятно - обернуть button в div, но хотелось обойтись без оберток. Может быть я что-то упускаю?

Модельный код:

body {
  display: flex;
  min-height: 100vh;
  margin: 0;
  background-image: url(https://picsum.photos/id/234/1000/2000);
  background-size: cover;
  background-position: center;
}

.btn {
  margin: auto;
  padding: 1em 2em;
}

.btn:hover {
  box-shadow: 0 0 0 200vw rgb(0, 0, 0, .5);
}

<button class="btn">Hover me!</button>

Answer 1

Да, есть такое. Добавь transition: .1s; или что-то свое что б пофиксить.

body {
  display: flex;
  min-height: 100vh;
  margin: 0;
  background-image: url(https://picsum.photos/id/234/1000/2000);
  background-size: cover;
  background-position: center;
}

.btn {
  margin: auto;
  padding: 1em 2em;
  transition: .1s;
}

.btn:hover {
  box-shadow: 0 0 0 200vw rgb(0, 0, 0, .5);
}

<button class="btn">Hover me!</button>

БЛОГ НА HUSL

Box-shadow в Firefox обрезается на 50px для тега button

Ответы (1 шт):