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

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

вот Скрипка JS: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 52
css3 grayscale webkit blurry translate3d

8 ответов:

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

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

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

34

Я нашел это с помощью: 

-webkit-perspective: 1000;

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

32

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

CSS3 вводит кучу стандартных эффектов фильтра, одним из них является blur fitler:

-webkit-filter: blur(radius);

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

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

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

-webkit-filter: blur(0);

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

-webkit-transform: translateZ(0);
28

попробуй такое

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

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

5

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

1

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

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

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

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

-1

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

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

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

-2