css transform, postrzępione krawędzie w chrome

Jeśli używasz transition zamiast transform, -webkit-backface-visibility: hidden; nie działa. Postrzępiona krawędź pojawia się podczas animacji przezroczystego pliku png.

Aby go rozwiązać użyłem: outline: 1px solid transparent;

Spróbuj przekształcić 3d. To działa jak urok!

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

Dodanie przezroczystej ramki 1px spowoduje wygładzanie

outline: 1px solid transparent;

Alternatywnie, dodaj przezroczyste pudełko 1px-shadow.

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

Wybrana odpowiedź (ani żadna z innych odpowiedzi) nie zadziałała dla mnie, ale to:

img {outline:1px solid transparent;}

Mam problem z gradientem CSS3 z -45deg. background skośny, był mocno postrzępiony podobny, ale gorszy niż oryginalny post. Więc zacząłem grać z obu background-size. To rozciągałoby postrzępienie, ale nadal tam było. Następnie w dodatku czytałem, że inni ludzie mają problemy też w przyrostach 45deg więc dostosowałem z -45deg do -45.0001deg i mój problem został rozwiązany.

W moim CSS poniżej, background-size było początkowo 30px i deg dla gradientu tła było dokładnie -45deg, a wszystkie klatki kluczowe były 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;
        }

Możesz być w stanie zamaskować postrzępienie za pomocą niewyraźnych cieni pudełkowych. Użycie -webkit-box-shadow zamiast box-shadow upewni się, że nie wpłynie to na przeglądarki inne niż webkit. Możesz jednak sprawdzić Safari i mobilne przeglądarki webkit.

Wynik jest nieco lepszy, ale i tak dużo mniej dobry niż w innych przeglądarkach:

Pomyślałem, że dorzucimy również nasze rozwiązanie, ponieważ mieliśmy dokładnie ten sam problem na Chrome / Windows.

Próbowaliśmy rozwiązania przez @stevenWatkins powyżej, ale nadal miał "stepping".

Zamiast

-webkit-backface-visibility: hidden;

Użyliśmy:

-webkit-backface-visibility: initial;

Dla nas to zrobił sztuczkę

Dodanie następującego div otaczającego dany element naprawiło to dla mnie.

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

Postrzępione krawędzie pojawiały się w moim przypadku wokół okna wideo.

Dla mnie to właśnie właściwość perspective CSS zadziałała:

-webkit-perspective: 1000;

Zupełnie nielogiczne w moim przypadku, ponieważ nie używam przejść 3d, ale mimo to działa.

Dla canvas w Chrome (Wersja 52)

Wszystkie wymienione odpowiedzi dotyczą obrazów. Ale mój problem dotyczy canvas w chrome (V. 52) Z transform rotate. Stały się postrzępione i wszystkie te metody nie mogą pomóc.

Rozwiązanie, które działa dla mnie:

1. Powiększ płótno o 1 px dla każdej strony = > + 2 px dla szerokości i wysokości;
2. narysuj obrazek z offsetem + 1px (w pozycji 1,1 zamiast 0,0) i ustalonym rozmiarem (rozmiar obrazka powinien być o 2px mniejszy od rozmiaru canvas)
3. Zastosuj wymaganą rotację

Tak ważne bloki kodu:

// 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>

Próbka: https://jsfiddle.net/tLbxgusx/1/

Uwaga: Istnieje wiele zagnieżdżonych div, ponieważ jest to uproszczona wersja z mojego projektu.

Ten numer jest reprodukowany również dla Firefoksa dla mnie. Nie ma takiego problemu na Safari i FF z retiną.

I inne rozwiązanie jest umieszczenie canvas w div o tym samym rozmiarze i zastosowanie następującego css do tego div:

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

I obrót powinien być zastosowany do tego div owijania. Tak wymienione rozwiązanie działa, ale z niewielkimi modyfikacjami.

A zmodyfikowany przykład takiego rozwiązania to: https://jsfiddle.net/tLbxgusx/2/

Uwaga: Patrz styl div z klasą 'third'.