Размывает текст при transform: translate(-50%, -50%)?

Question

[Yuriy]

Подскажите, как побороть размытие текста в блоке с transform: translate(-50%, -50%)
есть PopUp форма, она центруется на экране. При transform: translate(-50%, -50%), текст в этой форме размытый

Answer 1

[Мария Попова]

в блоке со свойством translate(-50%,-50%) текст поместить в отдельный блок со свойством translate(0%,0%)

Comments

[Саша]

Мария Попова проверяли или теория?)

[Yuriy]

Саша: проверил не работает

[Мария Попова]

Yuriy: у элементов display:block есть?

[Yuriy]

Мария Попова: да

[amelikhova]

Единственное правильное решение. Спасибо

Answer 2

[Александр Филиппенко]

попробуйте transform: scale(0.999);
Если не получится, то заливайте на jsFiddle или аналоги.

Comments

[Yuriy]

для чего мне scale? там translate(-50%,-50%)

[Александр Филиппенко]

Yuriy: это хак. Помогает включить сглаживание в браузере. Для треугольников сделанных через бордеры работает во всяком случае.

[Капитан Какао]

Yuriy: от translate не размывается текст.
Проблема в другом.
HTML/CSS в студию на jsfiddle.net, тогда сможем посмотреть и помочь решить проблему.
А гаданием по картинкам тут вряд ли кто-то занимается)

[Yuriy]

Rad Cor: может из-за шрифта? он не стандартный 'archiveregular'

[Капитан Какао]

Yuriy: не знаю, нужно смотреть html/css код.

Answer 3

[Саша]

Yuriy попробуйте задать на родителя стиль transform: translate(-50%, -50%)
и если на родительском элементе используется scale, то пробуйте задавать не целое значение, например:
transform:scale(1.05);

Answer 4

[saharo44ek]

Еще как вариант указать min-width b min-height четные

Answer 5

[fedorchenko]

У меня так было. Стояло свойство
will-change: transform;

Убрал и стало ок