css transform, bordes dentados en cromo

He estado utilizando 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 sigue siendo claramente visible pero no tan malo). No puedo probar Safari porque no tengo una Mac.

La foto girada y el texto se ven bien, solo 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 manera de solucionarlo, por ejemplo, forzando a Chrome a usar AA?

Ejemplo a continuación:

Ejemplo de bordes dentados

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-visibility con un valor de hidden . En mis propias pruebas, esto los ha suavizado por completo. Espero que ayude.

 -webkit-backface-visibility: hidden; 

Si usa transition lugar de transform , -webkit-backface-visibility: hidden; No funciona. Aparece un borde irregular durante la animación para un archivo png transparente.

Para resolverlo utilicé: outline: 1px solid transparent;

Prueba la transformación 3D. Esto funciona como un encanto!

 /* Due to a bug in the anti-liasing*/ -webkit-transform-style: preserve-3d; -webkit-transform: rotateZ(2deg); 

Agregar un borde transparente de 1px activará anti-aliasing

 outline: 1px solid transparent; 

Alternativamente, agregue una caja transparente de 1px.

 box-shadow: 0 0 1px rgba(255,255,255,0); 

La respuesta elegida (ni ninguna de las otras respuestas) no funcionó para mí, pero esto hizo:

img {outline:1px solid transparent;}

He estado teniendo un problema con un gradiente CSS3 con -45deg. El background inclinado, tenía una irregularidad similar a la original, pero era peor. Así que comencé a jugar con el background-size . Esto estiraría la irregularidad, pero todavía estaba allí. Luego, además, leí que otras personas también tienen problemas en incrementos de -45deg -45.0001deg así que -45deg de -45deg a -45.0001deg y mi problema fue resuelto.

En mi CSS a continuación, background-size era inicialmente de 30px y el deg para el degradado de fondo era exactamente de -45deg , y todos los fotogtwigs clave eran de 30px 0 .

  @-webkit-keyframes progressStripeLTR { to { background-position: 60px 0; }; } @-moz-keyframes progressStripeLTR { to { background-position: 60px 0; }; } @-ms-keyframes progressStripeLTR { to { background-position: 60px 0; }; } @-o-keyframes progressStripeLTR { to { background-position: 60px 0; }; } @keyframes progressStripeLTR { to { background-position: 60px 0; }; } @-webkit-keyframes progressStripeRTL { to { background-position: -60px 0; }; } @-moz-keyframes progressStripeRTL { to { background-position: -60px 0; }; } @-ms-keyframes progressStripeRTL { to { background-position: -60px 0; }; } @-o-keyframes progressStripeRTL { to { background-position: -60px 0; }; } @keyframes progressStripeRTL { to { background-position: -60px 0; }; } .pro-bar-candy { width: 100%; height: 15px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: rgb(187, 187, 187); background: -moz-linear-gradient( -45.0001deg, rgba(187, 187, 187, 1.00) 25%, transparent 25%, transparent 50%, rgba(187, 187, 187, 1.00) 50%, rgba(187, 187, 187, 1.00) 75%, transparent 75%, transparent ); background: -webkit-linear-gradient( -45.0001deg, rgba(187, 187, 187, 1.00) 25%, transparent 25%, transparent 50%, rgba(187, 187, 187, 1.00) 50%, rgba(187, 187, 187, 1.00) 75%, transparent 75%, transparent ); background: -o-linear-gradient( -45.0001deg, rgba(187, 187, 187, 1.00) 25%, transparent 25%, transparent 50%, rgba(187, 187, 187, 1.00) 50%, rgba(187, 187, 187, 1.00) 75%, transparent 75%, transparent ); background: -ms-linear-gradient( -45.0001deg, rgba(187, 187, 187, 1.00) 25%, transparent 25%, transparent 50%, rgba(187, 187, 187, 1.00) 50%, rgba(187, 187, 187, 1.00) 75%, transparent 75%, transparent ); background: linear-gradient( -45.0001deg, rgba(187, 187, 187, 1.00) 25%, transparent 25%, transparent 50%, rgba(187, 187, 187, 1.00) 50%, rgba(187, 187, 187, 1.00) 75%, transparent 75%, transparent ); background: -webkit-gradient( linear, right bottom, right top, color-stop( 25%, rgba(187, 187, 187, 1.00) ), color-stop( 25%, rgba(0, 0, 0, 0.00) ), color-stop( 50%, rgba(0, 0, 0, 0.00) ), color-stop( 50%, rgba(187, 187, 187, 1.00) ), color-stop( 75%, rgba(187, 187, 187, 1.00) ), color-stop( 75%, rgba(0, 0, 0, 0.00) ), color-stop( rgba(0, 0, 0, 0.00) ) ); background-repeat: repeat-x; -webkit-background-size: 60px 60px; -moz-background-size: 60px 60px; -o-background-size: 60px 60px; background-size: 60px 60px; } .pro-bar-candy.candy-ltr { -webkit-animation: progressStripeLTR .6s linear infinite; -moz-animation: progressStripeLTR .6s linear infinite; -ms-animation: progressStripeLTR .6s linear infinite; -o-animation: progressStripeLTR .6s linear infinite; animation: progressStripeLTR .6s linear infinite; } .pro-bar-candy.candy-rtl { -webkit-animation: progressStripeRTL .6s linear infinite; -moz-animation: progressStripeRTL .6s linear infinite; -ms-animation: progressStripeRTL .6s linear infinite; -o-animation: progressStripeRTL .6s linear infinite; animation: progressStripeRTL .6s linear infinite; } 

Es posible que pueda enmascarar el corte con sombras de cuadro borrosas. Usar -webkit-box-shadow en lugar de box-shadow se asegurará de que no afecte a navegadores que no sean webkit. Sin embargo, es posible que desee comprobar Safari y los navegadores Webkit móviles.

El resultado es algo mejor, pero aún mucho menos bueno que con los otros navegadores:

con sombra de caja (parte inferior)

Solo pensé que incluiríamos nuestra solución ya que teníamos exactamente el mismo problema en Chrome / Windows.

Probamos la solución por @stevenWatkins, pero aún así tuvimos el “paso”.

En lugar de

 -webkit-backface-visibility: hidden; 

Nosotros usamos:

 -webkit-backface-visibility: initial; 

Para nosotros, esto funcionó 🎉

Agregar lo siguiente en el div que rodea el elemento en cuestión me solucionó esto.

 -webkit-transform-style: preserve-3d; 

Los bordes dentados estaban apareciendo alrededor de la ventana de video en mi caso.

Para mí fue la propiedad CSS de perspectiva la que hizo el truco:

 -webkit-perspective: 1000; 

Completamente ilógico en mi caso, ya que no uso transiciones en 3D, pero funciona de todos modos.

Para canvas en Chrome (Versión 52)

Todas las respuestas enumeradas son sobre imágenes. Pero mi problema es sobre Canvas en Chrome (v.52) con transformación rotar. Se volvieron dentados y todos estos métodos no pueden ayudar.

Solución que funciona para mí:

  1. Haga que el canvas sea más grande en 1 px para cada lado => +2 px para ancho y alto;
  2. Dibujar imagen con desplazamiento + 1px (en la posición 1,1 en lugar de 0,0) y tamaño fijo (el tamaño de la imagen debe ser 2px menor que el tamaño del canvas)
  3. Aplicar la rotación requerida

Bloques de código tan importantes:

 // Unfixed version ctx.drawImage(img, 0, 0, 335, 218); // Fixed version ctx.drawImage(img, 1, 1, 335, 218); 
 /* This style should be applied for fixed version */ canvas { margin-left: -1px; margin-top:-1px; }