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

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

55 голосов
/ 06 ноября 2011

Я вижу проблему, из-за которой 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 - суть в том, чтобы урезать код до самого необходимого.

Ответы [ 8 ]

33 голосов
/ 27 июня 2013

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

-webkit-perspective: 1000;

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

33 голосов
/ 07 ноября 2011

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

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

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

29 голосов
/ 01 сентября 2015

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

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

-webkit-filter: blur(radius);

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

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

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

-webkit-filter: blur(0);

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

-webkit-transform: translateZ(0);
5 голосов
/ 09 марта 2016

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

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

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

2 голосов
/ 12 сентября 2012

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

0 голосов
/ 13 ноября 2015

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

0 голосов
/ 01 августа 2012 
body {
-webkit-font-smoothing: subpixel-antialiased;
}

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

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

0 голосов
/ 30 января 2012

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

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

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

...