Округление субпикселей CSS при преобразованиях ⇐ CSS

[Anonymous]

Итак, эта проблема уже возникала раньше, например здесь: Translate + Canvas = Blurry Text
и здесь: возможно ли «привязка к пикселю» после перевода CSS?

Похоже, ни по этим ссылкам, ни по другим статьям, которые я читал, нет никаких выводов. Некоторые респонденты не считали это настолько важным, чтобы волноваться, поэтому вот почему в моей ситуации это так:

Снимок экрана в Chrome 41.0.2272.104


Снимок экрана в Safari 8.0.4 (10600.4.10.7)

Подробно видите потерю в Safari? (посмотрите на структуру на изображении космического корабля или на детали камней на третьем изображении)

CSS для этих ребят:

Код: Выделить всё

width: 100%;
height: auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);

Итак, в некоторых из этих ситуаций TranslateY окажется в половине пикселя. Первое изображение слева имеет такую ​​матрицу преобразования:

Код: Выделить всё

-webkit-transform: matrix(1, 0, 0, 1, 0, -56.5);

В настоящее время кажется, что Chrome отображает это хорошо (я видел, как некоторые люди говорят, что разные браузеры создают проблему в разных версиях), но в настоящее время Safari имеет проблема. Итак, я предполагаю решить эту проблему, чтобы убедиться, что есть только целые пиксели, что я уже сделал, выполнив математические вычисления и применив преобразование в JavaScript, но это требует больше времени производительности при работе с большим количеством изображений. .

Я пробовал несколько приемов, использующих только CSS, например, использование Scale3d, но безуспешно. Если у кого-нибудь есть решения без JS, я был бы очень признателен за обмен знаниями.

Подробнее здесь: https://stackoverflow.com/questions/292 ... transforms