Решение размытия шрифта из-за transform:translate()?

Question

[Nikita Shchypylov]

Много где я использую эту фичу, ибо удобно:

@include transform(translate(-50%, -50%));
					left: 50%;
					top: 50%;

но появилась проблема со шрифтами, они становятся размытыми
Пробовал давать translateZ(0) -не помогло

Что можете посоветовать?
Спасибо

Comments

[Yustas Alexu]

Есть еще другая проблема, transform:translate переводит элемент в трехмерное измерение, то есть появляется z-index.

[Yustas Alexu]

Если нужно что-то подвинуть лучше это делать через margin все таки. А текст двигать с помощью text-indent

[Ankhena]

Yustas Alexu: text-indent весь текст не подвинет. Отрицательный margin не очень подходит для неизвестной ширины.

Answer 1

[Philipp]

#1:

-webkit-font-smoothing: subpixel-antialiased;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

#2

transfom: scale(2); 
zoom: 0.5;

Answer 2

[wadowad]

Можно обойтись без трансформаций:

position: absolute;
left: 0;
right: 0;
margin: auto;
width: fit-content;

Если позиционируемый блок шире родителя, то можно вот так:

position: absolute;
left: -300px;
right: -300px;
margin: auto;
width: fit-content;