WebKit: Texto embaçado com escala de css + translate3d
Estou vendo um problema em que o Chrome e outros navegadores WebKit desfocam maciçamente qualquer conteúdo em escala de CSS que também tenha o translate3d aplicado.
Aqui está um JS Fiddle:http: //jsfiddle.net/5f6Wg. (Visualizar no 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>
Existem soluções alternativas conhecidas para isso? Entendo que no exemplo simples acima, eu poderia simplesmente usar translate em vez de translate3d - o ponto aqui é reduzir o código ao essencia