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

Question

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

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

Answer 1

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

Answer 2

Это размыто, потому что стандартные дисплеи с разрешением 72 точек на дюйм не могут отображать размеры дробных пикселей, как я уверен, вы понимаете. Кроме того, существует nothing within the spec, чтобы повлиять на рендеринг или наложение границ.

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

Некоторые устройства и дисплеи сетчатки поддерживают sub-pixel border widths, но нет согласованных решений, когда дело доходит до кросс-браузерной поддержки.

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

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