transiciones transicion propiedad examples ejemplos efectos css google-chrome css3 transform antialiasing

transicion - css transform, bordes dentados en cromo



transition css hover (11)

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:


Para lienzo 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 lienzo 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 lienzo)
  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; }

<!--Unfixed version--> <canvas width="335" height="218"></canvas> <!--Fixed version--> <canvas width="337" height="220"></canvas>

Muestra: https://jsfiddle.net/tLbxgusx/1/

Nota: hay muchos divs anidados porque es una versión simplificada de mi proyecto.

Este problema también se reproduce para Firefox para mí. No hay tal problema en Safari y FF con retina.

Y otra solución fundada es colocar canvas en div del mismo tamaño y aplicar el siguiente CSS a este div:

overflow: hidden; box-shadow: 0 0 1px rgba(255,255,255,0); // Or //outline:1px solid transparent;

Y la rotación se debe aplicar a este envoltorio div. La solución listada funciona pero con pequeñas modificaciones.

Y el ejemplo modificado para dicha solución es: https://jsfiddle.net/tLbxgusx/2/

Nota: Ver estilo de div con clase ''tercero''.


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.


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

outline: 1px solid transparent;

Alternativamente, agregue una sombra de caja de 1px con su color de relleno.

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


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;


Es posible que pueda enmascarar el corte con box-shadows 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:


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 fotogramas 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; }


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

img {outline:1px solid transparent;}


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.


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);


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;


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ó 🎉