Размытый текст, потому что перевод (-50%, -50%) позиций на половину пикселя

Question

У меня возникли проблемы с преобразованием: переведите (-50%, -50%) в сочетании с шрифтом google в chrome. Эта комбинация заставила текст выглядеть размытым. Я заметил, что это было вызвано переводом, и, посмотрев на позицию элемента, я заметил, что он позиционируется на половине пикселя. Я смог исправить его с помощью translate (calc (-50% - 0.5px), -50%), но лучше иметь лучшее решение, чем это обходное решение.

Возможно, есть способ округлить пиксели до целого числа при использовании процентов?

Answer 1

Вы можете попробовать установить transform-style: preserve-3d на родителя или, возможно, изменить свойство преобразования, которое также должно включать perspective(1px).