transformación CSS, bordes dentados en Chrome
He estado usando la transformación CSS3 para rotar imágenes y cuadros de texto con bordes en mi sitio web.
El problema es que el borde parece irregular en Chrome, como un juego (de baja resolución) sin Anti-Aliasing. En IE, Opera y FF se ve mucho mejor porque se usa AA (que todavía es claramente visible pero no tan malo). No puedo probar Safari porque no tengo una Mac.
La foto rotada y el texto en sí se ven bien, sólo el borde se ve irregular.
El CSS que uso es este:
.rotate2deg {
transform: rotate(2deg);
-ms-transform: rotate(2deg); /* IE 9 */
-webkit-transform: rotate(2deg); /* Safari and Chrome */
-o-transform: rotate(2deg); /* Opera */
-moz-transform: rotate(2deg); /* Firefox */
}
¿Hay alguna forma de solucionar este problema, por ejemplo, obligando a Chrome a utilizar AA?
Ejemplo a continuación:
En caso de que alguien busque esto más adelante, un buen truco para deshacerse de esos bordes irregulares en las transformaciones CSS en Chrome es agregar la propiedad CSS -webkit-backface-visibilitycon un valor de hidden. En mis propias pruebas, esto los ha suavizado por completo.
-webkit-backface-visibility: hidden;
Si está utilizando transitionen lugar de transform, -webkit-backface-visibility: hidden;no funciona. Aparece un borde irregular durante la animación de un archivo png transparente.
Para resolverlo utilicé:outline: 1px solid transparent;
