Почему Safari 13 не рисует / рендерит контур в фокусе, когда используется переход

Question

Фокусировка на кнопке в приведенном ниже примере в Safari 13.0.5 не покажет контур, пока вы не принудительно перекрасите (например, изменив размер экрана)

Работает нормально в других браузерах

Есть ли какие-нибудь хаки, чтобы в этом случае в Safari отображался набросок?

button {
  width: 10em;
  height: 3em;
  transition: all .25s ease-in-out;
}

button:focus {
  outline : 2px blue dashed;
}

<button type="button">Button</button>

Интересно, что достаточно большое отрицательное смещение для контура обойдет эту ошибку.

К сожалению, это может работать не во всех моих случаях, поэтому я надеюсь на лучший ответ.

button {
  width: 10em;
  height: 3em;
  transition: all .25s ease-in-out;
}

button:focus {
  outline : 2px blue dashed;
  outline-offset: -2px;
}

<button type="button">Button</button>

Answer 1

Начиная с Safari 13.1, эта проблема больше не воспроизводится!

Answer 2

Это известная проблема сафари. Проблема в том, что вы не можете сфокусировать элемент кнопки в сафари. Это даже невозможно с атрибутом tabindex.

См. Некоторые ресурсы: ресурс 1 ресурс 2

A, возможно, возможное решение может быть примерно таким (замените элемент кнопки, например, на div с классом):

.button {
  width: 10em;
  height: 3em;
  transition: all .25s ease-in-out;
}

.button:focus {
  outline : 2px blue dashed;
  outline-offset: -2px;
}

<div class="button" tabindex="0">Button</div>

Даже в этом примере вы должны установить атрибут tabindex для сафари ..