Отключить субпиксельное наложение на границах html/css

Question

Я использую css transform:scale масштабировать некоторые элементы, а теперь границы, которые были изначально 1px solid blackполучить субпиксельный рендеринг - "сглаживание" - так как они сейчас 1.4px или что-то. Как именно это выглядит, зависит от браузера, но размыто во всех современных браузерах.

Могу ли я отключить субпиксельный рендеринг для определенных элементов?

Answer 1

Возникла аналогичная проблема с уменьшением масштаба с помощью transform: scale(ratio), за исключением того, что границы будут полностью исчезать при субпиксельном рендеринге вместо размытия.

Поскольку у меня был аналогичный вариант использования (динамическое масштабирование с помощью js), я решил реализовать решение javascript, предложенное в комментариях исходного автора:

container.style.transform = "scale(" + ratio + ")";
elementWithBorder.style.border = Math.ceil(1 / ratio) + "px solid lightgray";

Однако в ситуации апскейлинга я бы посоветовал Math.floor() не слишком "утолщать" границы.

Answer 2

Это размыто, потому что стандартные дисплеи с разрешением 72 т / д не могут отображать дробные пиксели, как я уверен, вы понимаете. Кроме того, в спецификации нет ничего, что могло бы повлиять на рендеринг или наложение границ.

Ширина пикселя 2 может дать вам лучшие результаты, но почти все будет размыто.

Некоторые устройства и дисплеи Retina поддерживают ширину границ субпикселя, но нет единого решения, когда речь заходит о кросс-браузерной поддержке.

В моем собственном тестировании я нашел лучшие результаты при масштабировании из угла, в отличие от центра по умолчанию. А также наращивание в четверть или половину суммы.

transform: scale(1.25);
transform-origin: left top;

Answer 3

Вы можете управлять сглаживанием текста в WebKit с помощью этого css: -webkit-font-smoothing: antialiased; И иногда форсирование 3d ускорения с помощью чего-то вроде: -webkit-transform: translate3d(0, 0, 0); также помогает алиасинг (по крайней мере, при использовании rotate в моем опыте).

Answer 4

Установка perspective свойство, кажется, делает свое дело:

      .subpixel-modal {
    transform: translate(-50%, -50%);
    perspective: 1px;
}