css transform, ujung bergerigi di chrome

Saya telah menggunakan transformasi CSS3 untuk memutar gambar dan kotak teks dengan batas di situs web saya.

Masalahnya adalah bahwa perbatasan terlihat bergerigi di Chrome, seperti game (resolusi rendah) tanpa Anti-Aliasing. Di IE, Opera dan FF terlihat jauh lebih baik karena AA digunakan (yang masih terlihat jelas tetapi tidak terlalu buruk). Saya tidak dapat menguji Safari karena saya tidak memiliki Mac.

Foto dan teks yang diputar itu sendiri terlihat baik-baik saja, hanya perbatasan yang terlihat bergerigi.

CSS yang saya gunakan adalah ini:

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

Apakah ada cara saya dapat memperbaikinya, misalnya dengan memaksa Chrome menggunakan AA?

Contoh di bawah ini:

Jika ada orang yang mencari ini nanti, trik yang bagus untuk menghilangkan tepi bergerigi pada transformasi CSS di Chrome adalah menambahkan properti CSS -webkit-backface-visibilitydengan nilai hidden. Dalam tes saya sendiri, ini benar-benar memuluskan mereka. Semoga itu bisa membantu.

-webkit-backface-visibility: hidden;

Jika Anda menggunakan transitionalih-alih transform,-webkit-backface-visibility: hidden; tidak berfungsi. Tepi bergerigi muncul selama animasi untuk file png transparan.

Untuk mengatasinya saya menggunakan: outline: 1px solid transparent;

Menambahkan batas transparan 1px akan memicu anti-aliasing

outline: 1px solid transparent;

Atau, tambahkan bayangan kotak transparan 1px.

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

Coba transformasi 3d. Ini bekerja seperti pesona!

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

Jawaban pilihan (tidak ada jawaban lain) tidak berfungsi untuk saya, tetapi ini berhasil:

img {outline:1px solid transparent;}

Saya mengalami masalah dengan gradien CSS3 dengan -45deg. The backgroundmiring, itu buruk bergerigi mirip tapi lebih buruk dari posting asli. Jadi saya mulai bermain dengan keduanya background-size. Ini akan meregangkan kerutan, tetapi masih ada di sana. Kemudian selain itu saya membaca bahwa orang lain juga mengalami masalah dengan kenaikan 45deg jadi saya menyesuaikan dari -45degke-45.0001deg dan masalah saya terpecahkan.

Dalam CSS saya di bawah ini, background-sizeawalnya 30pxdan deguntuk latar belakang gradien tepat -45deg, dan semua keyframe 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;
        }

Anda mungkin bisa menutupi jagging menggunakan kotak-bayangan kabur . Menggunakan -webkit-box-shadow alih-alih box-shadow akan memastikan itu tidak memengaruhi browser non-webkit. Anda mungkin ingin memeriksa Safari dan browser webkit seluler.

Hasilnya agak lebih baik, tetapi masih jauh kurang bagus dengan browser lain:

Hanya berpikir bahwa kami akan memasukkan solusi kami juga karena kami memiliki masalah yang sama persis pada Chrome / Windows.

Kami mencoba solusinya dengan @stevenWatkins di atas, tetapi masih memiliki "loncatan".

Dari pada

-webkit-backface-visibility: hidden;

Kami menggunakan:

-webkit-backface-visibility: initial;

Bagi kami ini berhasil 🎉

Menambahkan berikut pada div di sekitar elemen yang dimaksud memperbaiki ini untuk saya.

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

Tepi bergerigi muncul di sekitar jendela video dalam kasus saya.

Bagi saya itu adalah properti CSS perspektif yang melakukan trik:

-webkit-perspective: 1000;

Sepenuhnya tidak logis dalam kasus saya karena saya tidak menggunakan transisi 3d, tetapi tetap bekerja.

Untuk kanvas di Chrome (Versi 52)

Semua jawaban yang tercantum adalah tentang gambar. Tapi masalah saya adalah tentang kanvas dalam chrome (v.52) dengan rotate transform. Mereka menjadi bergerigi dan semua metode ini tidak dapat membantu.

Solusi yang berfungsi untuk saya:

1. Buat kanvas lebih besar pada 1 px untuk setiap sisi => +2 px untuk lebar dan tinggi;
2. Gambarlah dengan offset + 1px (pada posisi 1,1 bukannya 0,0) dan ukuran tetap (ukuran gambar harus 2px kurang dari ukuran kanvas)
3. Terapkan rotasi yang diperlukan

Blok kode yang sangat penting:

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

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

Catatan: ada banyak div bersarang karena ini adalah versi yang disederhanakan dari proyek saya.

Masalah ini direproduksi juga untuk Firefox untuk saya. Tidak ada masalah seperti itu di Safari dan FF dengan retina.

Dan solusi yang didirikan lainnya adalah menempatkan kanvas ke div dengan ukuran yang sama dan menerapkan css berikut ke div ini:

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

Dan rotasi harus diterapkan pada div pembungkus ini. Jadi solusi terdaftar berhasil tetapi dengan modifikasi kecil.

Dan contoh yang dimodifikasi untuk solusi tersebut adalah: https://jsfiddle.net/tLbxgusx/2/

Catatan: Lihat gaya div dengan kelas 'ketiga'.