Центрировать элемент внутри кнопки на обеих осях, используя Flexbox

Question

Я пытаюсь использовать Flexbox для центрирования элемента по обеим осям внутри элемента кнопки. Код прекрасно работает в Chrome, но не может центрировать элемент в Firefox и Safari. Когда я преобразую кнопку в элемент div, элемент будет располагаться по центру, как и ожидалось, однако по причинам доступности это для меня нереально.

Единственное, о чем я могу думать, это то, что вызывает эту проблему - это либо ошибка в браузере, либо какое-то свойство CSS, которое задается таблицей стилей пользовательского агента, о которой я не знаю.

Ожидаемый результат:

Фактический результат:

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  background-color: blue;
}

.square {
  width: 32px;
  height: 32px;
  background-color: red;
}

<button type="button">
  <div class="square"></div>
</button>