Пост-анимация размытого / искаженного текста на основе Webkit через translate3d

Question

Эта проблема затрагивает все браузеры на основе WebKit, включая iPhone.

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

Я использую -webkit-transform: translate3d для «питания» реальной анимации. При использовании этого метода, в отличие от метода на основе JavaScript, текст становится размытым после анимации содержимого. Это особенно заметно на iPhone.

Несколько обходных путей, которые я видел, состояли в том, чтобы удалить относительное позиционирование, которое я сделал, и добавить правило для -webkit-font-smoothing: antialiased, которое я также сделал. Ни одно из изменений не имело ни малейшего значения.

Единственный способ , который я мог бы сделать правильно, без размытого текста, - это использовать обычный JavaScript для анимации и вообще обойти translate3d. Я бы предпочел использовать translate3d, потому что он работает на намного быстрее на устройствах с поддержкой WebKit, но я не могу понять, почему он так плохо влияет на текст.

Любые предложения или решения будут с благодарностью.

Answer 1

Мне кажется, что ничего из этого не сработало, но я нашел немного грязное решение, которое, похоже, помогло:

top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);

Answer 2

Как упомянуто выше @Robert, иногда помогает добавление фона, но не всегда.

Итак, для примера Дмитрий добавил, что это не единственное, что вы должны сделать: кроме фона, вы должны сказать браузеруявно используйте правильное сглаживание, поэтому есть пример Дмитрия: http://jsfiddle.net/PtDVF/1/

Вам нужно добавить эти стили вокруг (или для) блоков, где вам нужно исправить сглаживание:

background: #FFF; /* Or the actual color of your background/applied image */
-webkit-font-smoothing: subpixel-antialiased;

Answer 3

У меня была точно такая же проблема, описанная в посте Кена Авила: CSS: transform: translate (-50%, -50%) делает текст размытым

Проблема, конечно, заключалась в том, чтоЯ использовал transform: translate (-50%, -50%), что сделало мое центрированное содержимое размытым, но только в сафари на osx.

Не только текст становится размытым, но и весь контент,в том числе изображения.Я прочитал: http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/, что "размытие" связано с тем, что элемент отображается на нецелой границе.

Я также обнаружил, что могу избежать использования transform translate в горизонтальной частимоего центрирования из этого поста: https://coderwall.com/p/quutdq/how-to-really-center-an-html-element-via-css-position-absolute-fixed -Единственный минус заключался в том, что мне пришлось ввести обертку.

Я обнаружил, что при использовании transform: translateY (-50%) ничего не создавал "bluryness ", возможно, потому что мой элемент имеет заданную высоту и, следовательно, не заканчивается рендерингом на нецелой границе.

Поэтому мое решение получилось так:

.wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
}
.centered {
  position: relative;
  left: -50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class="wrapper">
  <div class="centered">
    Content
  </div>
</div>

Answer 4

Я исправил эту проблему, добавив стиль translate3d к элементу до появления анимации.

-webkit-transform: translate3d(0,0,0); 

Answer 5

Элементы, которые вы переводите, должны делиться на два с четными числами.

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

Элемент div с шириной: 503px и высотой 500px вызовет размытие, независимо от того, каким образом вы его перемещаете илина сколько при использовании translateX или Y. Используя transform, он использует графический ускоритель графического процессора, что должно привести к очень четким, гладким краям.Также может быть хорошей идеей установить размер блока: border-box;чтобы обеспечить расчетную ширину, включая отступы и границы.

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

Answer 6

Это лучшее решение translateX(calc(-50% + 0.5px))

Answer 7

Наверное, самое простое решение:

transform: translate(-50%, -50%) scale(2); 
zoom:.5;

Scale-and-zoom обеспечивает округление значений пикселей до полных чисел

Answer 8

Ни один из этих ответов не работал для меня, но с использованием

display: inline-table;

сделал трюк

Answer 9

Уменьшите вертикальное поле (margin-top или margin-bottom) или высоту любого элемента в контейнере, к которому применяется свойство transform translate, всего на 1 пиксель.

Answer 10

Решение, найденное в моем случае, заключалось в установке значения height первого дочернего элемента