transformation css, bords irréguliers dans chrome

Question

J'ai utilisé CSS3 transform pour faire pivoter des images et des zones de texte avec des bordures dans mon site web.

Le problème est que les bordures sont irrégulières dans Chrome, comme dans un jeu (basse résolution) sans anti-crénelage. Dans IE, Opera et FF, l'aspect est bien meilleur parce que l'anti-crénelage est utilisé (ce qui est encore clairement visible mais pas si mal). Je ne peux pas tester Safari car je n'ai pas de Mac.

La photo pivotée et le texte lui-même sont corrects, c'est seulement la bordure qui est irrégulière.

La méthode CSS que j'utilise est la suivante :

.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 */
}

Existe-t-il un moyen de résoudre ce problème, par exemple en forçant Chrome à utiliser AA ?

Exemple ci-dessous :

Answer 1

La réponse choisie (ni aucune des autres réponses) n'a pas fonctionné pour moi, mais celle-ci a fonctionné :

img {outline:1px solid transparent;}

Answer 2

L'ajout de ce qui suit dans la div entourant l'élément en question m'a permis de résoudre le problème.

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

Dans mon cas, les bords dentelés apparaissaient autour de la fenêtre vidéo.

Answer 3

J'ai un problème avec un gradient CSS3 avec -45deg. Le background était très irrégulière, semblable mais pire que celle du poteau d'origine. J'ai donc commencé à jouer avec les deux background-size . Cela permettait d'atténuer les aspérités, mais elles étaient toujours là. En outre, j'ai lu que d'autres personnes rencontraient également des problèmes avec des incréments de 45 degrés. -45deg à -45.0001deg et mon problème était résolu.

Dans mon CSS ci-dessous, background-size a été initialement 30px et le deg pour le dégradé d'arrière-plan était exactement -45deg et toutes les images clés ont été 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;
        }

Answer 4

Nous avons eu exactement le même problème sur Chrome/Windows.

Nous avons essayé la solution proposée par @stevenWatkins ci-dessus, mais le problème persiste.

Au lieu de

-webkit-backface-visibility: hidden;

Nous avons utilisé :

-webkit-backface-visibility: initial;

Pour nous, c'est ce qui a fait l'affaire

Answer 5

Vous pouvez peut-être masquer le décalage en utilisant des images floues. ombres de la boîte . L'utilisation de -webkit-box-shadow au lieu de box-shadow permet de s'assurer que cela n'affecte pas les navigateurs non-webkit. Vous pouvez cependant vérifier Safari et les navigateurs webkit mobiles.

Le résultat est un peu meilleur, mais toujours beaucoup moins bon qu'avec les autres navigateurs :