Transform: translate(-50%,-50%) мылит изображение?

Question

[codymaverick]

Чтобы выровнять картинку в блоке использую такие свойства для картинки

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

НО свойство position: transform: translate(-50%,-50%) мылит картинку. Можно ли это как то пофиксить?

Comments

[Сергей delphinpro]

Transform: translate(-50%,-50%) мылит изображение?

Да, бывает мылит.

Можно ли это как то пофиксить?

Иногда можно. Сделайте ширину четным кол-вом пикселей. Помогает не всегда.

[codymaverick]

Сергей, Помогло, благодарю!

[Егор Живагин]

Сергей, 0_o . Как это работает?))
У меня на проекте схожая мелкая проблемка, затестил, помогло. Может у вас ссылочка на объяснение под рукой?

[Сергей delphinpro]

Егор Живагин, чётное делится на 2 нацело =)
Простой пример: как нарисовать черную линию шириной 3 пикселя ровно посередине блока? Нарисовать две черных линии в позициях 50%+1px и 50%-1px и нарисовать еще две линии в позициях 50%+2px и 50%-2px более светлым оттенком (или полупрозрачными). Визуально линия будет казаться шириной 3 пикселя, но замыленная.

[Егор Живагин]

Сергей, действительно, логично. Благодарю.