WebKit: texto borroso con escala CSS + translate3d
Veo un problema en el que Chrome y otros navegadores WebKit difuminan masivamente cualquier contenido a escala CSS que también ha aplicado translate3d.
Aquí hay un violín JS:http: //jsfiddle.net/5f6Wg. (Ver en 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>
¿Hay alguna solución conocida para esto? Entiendo que en el simple ejemplo anterior, simplemente podría usar traducir en lugar de traducir3d: el punto aquí es despojar el código a lo esencial.