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

Я вижу проблему, когда Chrome и другие браузеры WebKit массивно смазывают содержимое css-масштабирования, которое также применяет translate3d.

Здесь JS Fiddle: http://jsfiddle.net/5f6Wg/. (Просмотр в Chrome.)

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner
{
  /*-webkit-transform: scale(1.2);*/
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}

<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>

Ответ 1

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

Смотрите здесь: http://jsfiddle.net/SfKKv/

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

Ответ 2

Я обнаружил, что используя:

-webkit-perspective: 1000;

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

Ответ 3

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

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

-webkit-filter: blur(radius);

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

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

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

-webkit-filter: blur(0);

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

-webkit-transform: translateZ(0);

Ответ 4

Попробуйте это

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

Или для более точного подхода вы можете вызвать функцию javascript для пересчета матрицы преобразования, удалив десятичные значения матрицы. см. fooobar.com/questions/54190/...

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

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

Ответ 8

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

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

То же самое для вышеуказанного ^