Наведение курсора CSS заставляет текст мигать

Question

У меня есть преобразование кнопок при наведении в мою пользовательскую таблицу стилей. Это позволяет мне создать кнопку от <a href> или <div>. Во время этого преобразования шрифт мигает странным образом. Не могли бы вы рассказать мне, почему и как его решить?

Вот код СКС: https://gist.github.com/rafpiek/7e1b2df5690baa3b02e88eee10adfb98

и видео: https://www.youtube.com/watch?v=4c4D96FukuQ&feature=youtu.be

.button { 
 
    text-decoration: none; 
 
    color: #ECECEC; 
 
    font-size: 20px; 
 
    height: 40px; 
 
    width: 100px; 
 
    background: #B3595F; 
 
    display: inline-block; 
 
    transition: all 0.30s linear; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    margin: 5px 3px; 
 
    cursor: pointer; 
 
    border-radius: 6px; 
 
    user-select: none; 
 
    font-weight: bold; 
 
} 
 
.button:-webkit-any-link { 
 
    color: #ECECEC; 
 
} 
 
.button:hover { 
 
    transform: scale(1.07); 
 
    color: #ECECEC; 
 
} 
 
.button:active, .button:focus, .button:visited { 
 
    text-decoration: none; 
 
    color: #ECECEC; 
 
} 
 
.button.blue { 
 
    background-color: #2C92FF; 
 
} 
 
.button.red { 
 
    background-color: #FF2113; 
 
} 
 
.button.green { 
 
    background-color: #1EBE32; 
 
}

<button class="button">button</button>

Answer 1

Попробуйте это в .button:

-webkit-font-smoothing: antialiased;

Answer 2

Это вызвано AFAIK из браузера меняется тип текста Сглаживание во время анимации (новый неявный уровень GPU).

Более подробную информацию о причинах и fixes здесь ->How to prevent Webkit text rendering change during CSS transition

Answer 3

можно уменьшить, используя перспективу и 3d шкала:

transform: perspective(1px) scale3d(1.07,1.07,1);