Шаткий текст при использовании шкалы преобразования ⇐ CSS

[Anonymous]

Я пытаюсь масштабировать размер кнопки на пахни, но когда это сделано, текст выглядит шатко. Я посмотрел на некоторые другие посты и попробовал некоторые предложения, такие как использование -ветбкит-backface-visibuity: hidden; , transform: translatez (0); и -webkit-transform-style: reverve-3d; , но никто не работает. https://jsfiddle.net/ad7n17so/>>
(я использую Firefox, если это имеет значение)

.button {
margin-left: 30px;
background: #FF0000;
color: #FFFFFF;
padding: 0.4em;
width: 100px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.button:hover {
-ms-transform: scale(1.25); /* IE 9 */
-webkit-transform: scale(1.25); /* Chrome, Safari, Opera */
transform: scale(1.25);
}


Подробнее здесь: https://stackoverflow.com/questions/365 ... form-scale