WebKit: Размытый текст с масштабированием css + translate3d

Webkit обрабатывает преобразованные 3D-элементы как текстуры, а не векторы, чтобы обеспечить аппаратное ускорение 3D. Единственным решением этого было бы увеличить размер текста и уменьшить масштаб элемента, по сути, создавая текстуру с более высоким разрешением.

См. здесь: http://jsfiddle.net/SfKKv/

Обратите внимание, что сглаживание по-прежнему недостаточное (стебли теряются), поэтому я усиливаю текст небольшим количеством теней.

Я обнаружил, что с помощью:

-webkit-perspective: 1000;

на контейнере вашего шрифта или набора значков сохранял четкость для меня после эксперимента с проблемой на Android nexus 4.2 в течение некоторого времени.

Эффект фильтра css — это графическая операция, которая позволяет управлять внешним видом любого элемента HTML. Начиная с Chromium 19, эти фильтры ускоряются графическим процессором, что делает их очень быстрыми.

CSS3 представляет набор стандартных эффектов фильтра, один из них — фильтр размытия:

-webkit-filter: blur(radius);

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

Установка радиуса на 0 заставит браузер использовать вычисления графического процессора и заставит его сохранить ваш html-элемент без изменений. Это похоже на применение эффектов «жестких краев».

Поэтому лучшим решением для меня, чтобы исправить этот эффект размытия, было добавить эту простую строку кода:

-webkit-filter: blur(0);

Существует также известная ошибка, которая влияет только на экраны Retina. (См. здесь: Почему не 't blur(0) удалить все размытие текста в Webkit/Chrome на экранах Retina?). Поэтому, чтобы он работал и для сетчатки, я рекомендую добавить вторую строку:

-webkit-transform: translateZ(0);

Попробуй это

 ...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}

Или для более точного подхода вы можете вызвать функцию javascript для пересчета матрицы преобразования, удалив десятичные значения матрицы. см.: https://stackoverflow.com/a/42256897/1834212

Я столкнулся с этой проблемой при использовании плагина изотопов (http://isotope.metafizzy.co/index.html) в сочетании с плагином масштабирования (http://janne.aukia.com/zoomooz/). Я создал плагин jquery для обработки моего случая. Я закинул его в репозиторий github на случай, если кому-то это может пригодиться. - https://github.com/charleshimmer/jquery-hirestext.

Я использовал javascript, чтобы переместить текст на 1 пиксель вверх, а затем через 100 мс вернуться на 1 пиксель вниз. Это почти незаметно и решило проблему полностью кросс-браузерно.

body {
-webkit-font-smoothing: subpixel-antialiased;
}

или я думаю, вы могли бы поместить это на определенный элемент, но у меня были проблемы с одним элементом, влияющим на весь сайт.

Я думаю, что это проблема с пользовательскими шрифтами шрифта.

Webkit обрабатывает преобразованные 3D-элементы как текстуры, а не векторы, чтобы обеспечить аппаратное ускорение 3D.

Это не имеет к этому никакого отношения. Вы заметите, что проблема с алиасингом может быть решена путем добавления информации о длительности и направлении (например, 0,3 linear). У вас есть кобыла, пытающаяся отобразить все во время выполнения:

То же самое для выше ^