Предотвращение «скачкообразных» CSS-переходов на элементах с закрашенным текстом

Question

Я пытаюсь применить некоторые переходы CSS3 к некоторым заголовкам на веб-сайте, над которым я работаю, но есть кое-что о переходах на элементах, которые содержат текст, который действительно меня беспокоит: в браузерах, которые применяют подсказки или подгонку к сетке шрифтаГлифы (которые, я думаю, большинство из них, за исключением, возможно, Safari), есть заметный «прыжок» в начале и конце перехода, где вы можете увидеть, что текст возвращается к пиксельной сетке, как показано в этом jsfiddle:http://jsfiddle.net/8csA9/20/ (часть этого, вероятно, является кратковременным «размытием» из-за фильтрации, но здесь определенно происходит некоторое изменение формы, по крайней мере, в FF и Chrome)

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

PS: этот вопрос фактически выходит за рамки простых переходов, простое применение статического поворота также заставляет Firefox по-прежнему намекать на текст, и результат заканчиваетсявыглядит довольно .. странно

PPS: Кажется, существует (или существовало) свойство '-webkit-font-smoothing', но черновик CSS3-шрифтов, похоже, отбросил правило, на котором он был основанвключен (шрифт плавный), и кажется, что он работал только на Chrome для Mac

Answer 1

Использование видимость задней поверхности: скрыто; ** Обновление: webkit moz mz и стандарт http://jsfiddle.net/jugularkill/58S2z/4/

Подробнее о видимости задней стороны: http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp

Answer 2

Это сработало как очарование для меня.Я добавил «backface-visibility: hidden» (плюс основные префиксы браузера) к элементам со свойством transition, и это исправило скачок / дрожание, которое я испытывал во время перехода.Я тестировал в Firefox, IE (9/10) и Chrome.

Однако я заметил одну вещь: убедитесь, что вы добавляете свойство в естественное состояние элемента, а не в псевдокласс (например, hover, active ...) элемента.

Answer 3

Для себя я обнаружил, что мне нужно добавить и backface-visibility: hidden, и transform-style: preserve-3d к элементу, содержащему скачкообразное содержимое.

Например:

.element-with-jumpy-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

Answer 4

Добавление transform: translate3d(0, 0, 0); или transform: translateZ(0); часто помогает исправить ошибки переходов, потому что это заставляет браузер использовать аппаратно-ускоренные 3D-переходы.

Answer 5

Если вы используете Bootstrap, вы можете использовать этот класс:

.backface-visibility(hidden);