Как исправить размытие текста при transform scale?

Question

[Nwton]

Пытаюсь сделать элементарный эффект увеличения кнопки при наведении. Всё работает, но содержимое (текст) мутнеют при scale+.

.anim_grow {
	transition-duration: 0.25s;
}

.anim_grow:hover {
	transform: perspective(1px) scale(1.1);
}

Добавил perspective, т.к. без него при scale+ текст еще и сдвигается на 1px вниз...

Answer 1

[Павел]

Размер шрифта слишком мал, чтобы изменение его кегля на 10% дало приемлемый результат в низкоплотных экранах. Конечно, в этом виноват скорее алгоритм увеличения, он мог бы подстроиться еще лучше. Но, как видим, не всегда у него это выходит.

Что делать?
1. Использовать кратность увеличения, которая облегчит алгоритму работу. Поставьте 1.2 вместо 1.1. Поставив, например, кратность 2 -- по завершению анимации все будет ок. (Хотя иногда присутствуют проблемы в алгоритме и с этим. Например, из scale(2) сделав scale(1), может быть все равно муть. Надеюсь, это поправят. Или, того хуже, будет прыгать на 1px при наведении мыши, или при очередном repaint);
2. Модифицировать именно размер шрифта. Браузеры современные хорошо рендерят любой кегль, если он кратен пикселю. (раньше, были большие проблемы со шрифтами в 13px и другими непопулярными, а сейчас решили ее);
3. Забить. На ретине все будет красиво.

Answer 2

[Андрей Верх]

Если кнопка как на скрине простая, то есть много способов её увеличения и без скейла.
Текст и пэддинги увеличьте, например.