WebKit: размытый текст с использованием css scale + translate3d

Question

Я вижу проблему, из-за которой 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>

Есть ли известные обходные пути для этого? Я понял это в простом примере, приведенном выше, я мог бы просто использовать translate, а не translate3d - суть в том, чтобы урезать код до самого необходимого.

Answer 1

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

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

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

Answer 2

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

-webkit-perspective: 1000;

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

Answer 3

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

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

-webkit-filter: blur(radius);

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

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

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

-webkit-filter: blur(0);

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

-webkit-transform: translateZ(0);

Answer 4

Попробуй это

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

Или для более точного подхода вы можете вызвать функцию javascript для пересчета матрицы преобразования, удалив десятичные значения матрицы. см.: /questions/42523639/chrome-font-poyavlyaetsya-blurry/42523646#42523646

Answer 5

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

Answer 6

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

Answer 7

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

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

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

Answer 8

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

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

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