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í:
- Haga que el lienzo sea más grande en 1 px para cada lado => +2 px para ancho y alto;
- 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)
- 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ó 🎉