Удалить размытость при трансляции анимации?

Question

Его середина 2016 года, есть ли хорошее обходное решение, чтобы удалить размытость при трансляции анимаций?

Предположим, у меня есть некоторые DIV с текстом внутри, и я хочу, чтобы оживить его:

div:hover { 
    transform: rotate(90deg); 
    transition: 1s transform; 
} 

Честно говоря, я перепробовал все решения, которые я не мог найти что-нибудь в Интернете. Большинство решений - несколько лет.

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

Есть ли лучший способ, который не настолько взломан?

Уточнить вопрос: Как сделать анимацию объектов чистой, без того, чтобы мои объекты стали размытыми? Должен быть способ деактивации оптимизаций, которые делает браузер.

В настоящее время я испытываю это с помощью браузеров Chrome/webkit.

Answer 1

Это очень распространенный вопрос - размытость вызвана тем, как Chrome оказывает контент, когда не используется аппаратное ускорение.

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

Посмотрите здесь: I've updated your jsFiddle

Вы хотите использовать translateZ или translate3d свойства, при выполнении перехода, например так:

.one:hover { 
    transform: rotate(90deg) translate3d(0,0,0); 
    transition: 1s all; 
} 
.two:hover{ 
    transform: rotate(90deg) translateZ(0); 
    transition: 1s all; 
} 
.three:hover{ 
    transform: rotate(90deg); 
    transition: 1s all; 
}