css transform, ujung bergerigi di chrome

193

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:

Contoh Tepi bergerigi

google-chrome  css  transform  antialiasing 
— dtech
sumber
Bagi mereka yang membacanya nanti: itu harus diperbaiki di Chrome pada versi 15 (November 2011), tetapi Safari memperkenalkan masalah yang sama persis di 5.1 untuk Mac yang sampai sekarang belum diperbaiki
— dtech
Dan mereka memperbaikinya dengan baik, sehingga kembali tidak mungkin. Kami memiliki kasus di mana antialiasing adalah hal terakhir yang kami inginkan, tetapi sekarang Chrome / Chromium / Safari tidak memiliki metode untuk mematikan antialiasing dalam gambar yang ditransformasikan walaupun mereka adalah gambar 1-bit (mis. B / w gif). Kabur sangat keren, sangat keren, lebih buram lebih keren, kata mereka! Satu-satunya cara untuk memastikan edge yang tajam adalah dengan mengonversi semua menjadi path atau objek svg dan menambahkan atribut-rendering = "crispEdges".
— Timo Kähkönen
Bagi saya masalahnya adalah dengan batas transparan yang digunakan untuk membuat panah. Ini ada di Chrome 40 saat menang dan mac. Tidak ada opsi di sini yang memperbaiki masalah ini.
— Gurnard

Jawaban:

389

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;
— Neven
sumber
7
Lifesaver - trik ini memungkinkan kami untuk mengaktifkan kembali -webkit-transform pada sejumlah situs yang sebelumnya kami terpaksa mematikannya karena masalah anti-aliasing. Terima kasih!
— Darren
ada bantuan untuk ini: stackoverflow.com/questions/9235342/… ?
— abernier
5
Ini berfungsi di Chrome, tetapi itu membuat mereka bergerigi lagi di iOS 6!
— lazd
11
@lazd untuk memperbaikinya di iOS addpadding: 1px; -webkit-background-clip: content-box;
— Rob Fletcher
2
@RobFletcher menambahkan padding dan background-clip yang sepertinya, menurut utas ini, penting untuk cross-browser dan solusi cross-os. Ini memperbaiki masalah OSX / Chrome saya juga jadi ... Saya pikir solusi lengkapnya akan seperti:padding: 1px;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-background-clip:content-box;background-clip:content-box;
— Benjamin Luoma
119

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;

— mhhorizon
sumber
4
ini tampaknya membantu dalam situasi di mana properti visibilitas web-kit-backface keluar.
— dgibbs
2
Bekerja untuk saya ketika tidak ada yang lain melakukannya. Sebelum menambahkan properti ini, Chrome Android memiliki masalah. Sekarang semua browser tampaknya berfungsi dengan baik.
— Bernie Sumption
Bekerja untuk saya di Safari di iOS 8.
— Moritz Friedrich
Solusi sempurna. Yang lain tidak bekerja. Saya hampir menyerah, dan meragukan ini akan berhasil. Tapi itu benar!
— Garconis
1
Berfungsi sempurna untuk kebutuhan saya. Saya memang menggunakan transisi, dan jawaban lainnya menyebabkan PNG saya menjadi pixelated pada keadaan default-nya. Jawaban Anda membantu menghapus pikselisasi apa pun - pada status default dan selama transisi. Sempurna!
— Garconis
24

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);
— Callam
sumber
rgba (255, 255, 255, 0) mungkin lebih baik
— mmm
4
Menambahkan bagian atas CSS dalam jawaban Anda dan outline: 1px solid transparent;bekerja dengan baik untuk saya. Solusi lain di atas tidak bekerja dengan cukup baik.
— Timothy Zorn
outline: 1px solid transparent;memicu anti-aliasing juga di Firefox 52 (yang memiliki masalah Chrome yang sama)
— Luca Detomi
18

Coba transformasi 3d. Ini bekerja seperti pesona!

/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d; 
-webkit-transform: rotateZ(2deg);
— Zypherone
sumber
1
mencoba ini di chrome sekarang (Agustus 2013 di Mac), solusi yang diterima tidak berfungsi, tetapi menggunakan ini (khusus preserve-3d; rotatemasih dapat digunakan tanpa mengubah ke rotateZ) tidak.
— Dave
Super hacky, tetapi berhasil untuk saya. Coba tingkat yang lebih kecil seperti 0,05 untuk menghindari ketidaksejajaran yang terlihat.
— cpursley
Preserve-3d menyelamatkan hidup saya.
— Hannes Schneidermayer
8

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

img {outline:1px solid transparent;}

— chris
sumber
2

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;
        }
— Pasak
sumber
1

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:

dengan bayangan kotak (bawah)

— dtech
sumber
1

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 🎉

— Nicholas McCreath
sumber
1

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.

— chaser7016
sumber
0

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.

— Aron
sumber
0

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>
Luaskan cuplikan

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'.

— Kiryl
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.