css transform, bordes dentados en cromo

He estado usando CSS3 transform 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 está tan mal). No puedo probar Safari porque no tengo una Mac.

La foto girada y el texto en sí 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 forma de solucionar esto, por ejemplo, forzando a Chrome a usar 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. Espero que ayude.

-webkit-backface-visibility: hidden;

Si está utilizando en transitionlugar 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;

Agregar un borde transparente de 1 px activará el suavizado

outline: 1px solid transparent;

Alternativamente, agregue una sombra de cuadro transparente de 1px.

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

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

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

img {outline:1px solid transparent;}

He tenido un problema con un gradiente CSS3 con -45deg. El backgroundinclinado, era muy irregular, similar pero peor que la publicación original. Entonces comencé a jugar con ambos background-size. Esto alargaría la irregularidad, pero todavía estaba allí. A continuación, además leí que otras personas están teniendo problemas también a 45 grados incrementos por lo ajusté a partir -45degde -45.0001degy mi problema fue resuelto.

En mi CSS a continuación, background-sizeestaba inicialmente 30pxy el deggradiente de fondo era exactamente -45deg, y todos los fotogramas clave eran 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 las irregularidades con sombras de cuadro borrosas . El uso de -webkit-box-shadow en lugar de box-shadow se asegurará de que no afecte a los navegadores que no sean webkit. Sin embargo, es posible que desee consultar Safari y los navegadores webkit móviles.

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

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

Intentamos la solución de @stevenWatkins arriba, pero aún así tuvimos el "paso".

En vez de

-webkit-backface-visibility: hidden;

Nosotros usamos:

-webkit-backface-visibility: initial;

Para nosotros esto hizo el truco 🎉

Agregar lo siguiente en el div que rodea el elemento en cuestión solucionó esto para mí.

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

Los bordes irregulares aparecían alrededor de la ventana de video en mi caso.

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

-webkit-perspective: 1000;

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

Para lienzo en Chrome (Versión 52)

Todas las respuestas enumeradas son sobre imágenes. Pero mi problema es sobre el lienzo en cromo (v.52) con transformación rotar. Se hicieron irregulares y todos estos métodos no pueden ayudar.

Solución que funciona para mí:

1. Haga el lienzo más grande en 1 px para cada lado => +2 px para ancho y alto;
2. Dibuje la 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

Tan importantes bloques de código:

// 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 . No existe tal problema en Safari y FF con retina.

Y otra solución fundada es colocar el lienzo en un 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 debe aplicarse a esta envoltura div. La solución listada funciona pero con una pequeña modificación.

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

Nota: Vea el estilo de div con la clase 'tercera'.