Предотвратите "прыгающие" переходы CSS на элементах с намеченным (с сеткой) текстом

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

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

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

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

Ответ 1

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

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

Ответ 2

Это работало как прелесть для меня. Я добавил "обратную видимость: скрытый" (плюс основные префиксы браузера) к элементам с свойством перехода, и он зафиксировал переход/джиттер, который я испытывал во время перехода. Я тестировал в Firefox, IE (9/10) и Chrome.

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

Ответ 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;
}

Ответ 4

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

.backface-visibility(hidden);

Ответ 5

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