Можно ли "привязать к пикселю" после перевода CSS?

Я создал модальную коробку и вертикально центрировал ее, используя технику

Второе изображение показывает эффект после использования CSS-преобразований. Обратите внимание на размытие линии ссылки и неверно отображаемых текстовых входов.

Хотя второе изображение не отображает его, иногда я замечаю верхнюю и нижнюю белые линии с тем же размытым эффектом.

Для записи текстовые входы стилизованы с использованием простых границ и цвета фона. Я включил CSS для этих входных данных здесь, чтобы вы могли видеть, что ничего особенного не происходит:

input {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 0;
    box-shadow: 0 1px 3px -1px #D5D5D5 inset;
    color: #4C4C4C;
    display: inline-block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    max-width: 100%;
    padding: 5px;
    transition: border-color 0.1s ease 0s;
}

Ответ 1

Единственным пуленепробиваемым решением является обеспечение того, чтобы ваш элемент занимал четное количество пикселей. Если высота (или ширина) не делится на 2, тогда она попытается отобразить ваш элемент на полупикселе, вызывая размытость.

У Firefox нет этой проблемы, потому что он поддерживает истинное подпиксельное рендеринг. Итак, несмотря на то, что ваш элемент на полупикселе, Firefox обрабатывает его элегантно.

По моему опыту, Webkit обычно привязывает элементы к ближайшему пикселю - (например, при использовании свойства letter-spacing) - так странно, что он не ведет себя одинаково для translate.

Ответ 2

В некоторых браузерах вы можете избежать трехмерных преобразований и использовать вместо них 2d-преобразования, перевод по умолчанию будет привязан к пикселям:

transform: translate(-50%, -50%);

transform: translate3d(-50%, -50%, 0);

JSBin: http://jsbin.com/epijal/3/edit

Ответ 3

Поскольку я столкнулся с той же проблемой с субпикселями в Chrome, а в версии 64 он все еще не может обрабатывать значения преобразования субпикселей, я решил написать небольшой js-скрипт, который устраняет проблему с субпикселями. Вы можете найти это на github. Он просто округляет значение до полного пикселя.

Надеюсь, кто-то найдет это полезным!

Ответ 4

Я всегда использую perspective: 1px; , например:

{
  margin: 50% 0 0 50%;
  perspective: 1px;
 transform: translate(-50%, -50%);
}