css dönüşümü, kromda pürüzlü kenarlar

195

Web sitemdeki resimleri ve metin kutularını kenarlıklı döndürmek için CSS3 dönüşümü kullanıyorum.

Sorun, kenarlığın Kenar Yumuşatma içermeyen (düşük çözünürlüklü) bir oyun gibi Chrome'da pürüzlü görünmesidir. IE, Opera ve FF'de çok daha iyi görünüyor çünkü AA kullanılıyor (ki bu hala açıkça görülebiliyor ama o kadar da kötü değil). Safari'yi test edemiyorum çünkü bir Mac'im yok.

Döndürülen fotoğraf ve metnin kendisi iyi görünüyor, yalnızca pürüzlü görünen kenarlıktır.

Kullandığım CSS şudur:

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

Bunu düzeltebilmemin bir yolu var mı, örneğin Chrome'u AA kullanmaya zorlayarak?

Aşağıdaki örnek:

Pürüzlü Kenarlar örneği

google-chrome  css  transform  antialiasing 
— dtech
kaynak
Daha sonra okuyanlar için: 15 (Kasım 2011) sürümünden itibaren Chrome'da düzeltilmelidir, ancak Safari, Mac için 5.1'de tam olarak aynı sorunu ortaya
— çıkardı
Ve o kadar iyi düzelttiler ki, geri dönmek imkansız. Kenar yumuşatmanın istediğimiz son şey olduğu durumlar var, ancak artık Chrome / Chromium / Safari'nin 1 bitlik görüntüler olmalarına rağmen (örn. B / w gif) dönüştürülmüş görüntülerde kenar yumuşatmayı kapatma yöntemi yok. Bulanıklık çok havalı, çok havalı, daha fazla bulanıklık daha havalı diyorlar! Keskin kenarlar sağlamanın tek yolu, hepsini svg yollarına veya nesnelere dönüştürmek ve şekil oluşturma = "crispEdges" niteliği eklemektir.
— Timo Kähkönen
Benim için sorun, bir ok oluşturmak için kullanılan şeffaf sınırlarla ilgili. Bu, win ve mac için Chrome 40'ta. Buradaki seçeneklerin hiçbiri sorunu çözmez.
— Gurnard

Yanıtlar:

392

Daha sonra birinin bunu araması durumunda, Chrome'daki CSS dönüşümlerindeki bu pürüzlü kenarlardan kurtulmanın güzel bir yolu, CSS özelliğini -webkit-backface-visibilitydeğeriyle eklemektir hidden. Kendi testlerimde, bu onları tamamen düzeltti. Umarım yardımcı olur.

-webkit-backface-visibility: hidden;
— Neven
kaynak
7
Lifesaver - bu numara, daha önce kenar yumuşatma sorunları nedeniyle dönüştürmeleri kapatmak zorunda kaldığımız bir dizi sitede -webkit-dönüşümünü yeniden etkinleştirmemize izin verdi. Teşekkürler!
— Darren
bu konuda herhangi bir yardım: stackoverflow.com/questions/9235342/… ?
— abernier
5
Bu, Chrome'da çalışır, ancak iOS 6'da tekrar pürüzlü hale getirir!
— lazd
11
@lazd iOS eklentisinde düzeltmek içinpadding: 1px; -webkit-background-clip: content-box;
— Rob Fletcher
2
@ RobFletcher, bu ileti dizisine göre tarayıcılar arası ve işletim sistemleri arası çözüm için gerekli görünen dolgu ve arka plan klibi ekledi. Bu düzeltmeleri benim OSX / Krom sorunu da öyle ... Ben tam bir çözüm gibi bir şey olacağını düşünüyorum:padding: 1px;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-background-clip:content-box;background-clip:content-box;
— Benjamin Luoma
122

Onun transitionyerine kullanıyorsanız transform, -webkit-backface-visibility: hidden;çalışmıyor. Şeffaf bir png dosyası için animasyon sırasında pürüzlü bir kenar görünüyor.

Bunu çözmek için kullandım: outline: 1px solid transparent;

— mhorizon
kaynak
4
bu, web-kit-backface-visibility özelliğinin gözden kaçtığı durumlarda yardımcı oluyor gibi görünüyor.
— dgibbs
2
Diğerlerinin hiçbiri yapmadığında benim için çalışıyor. Bu özelliği eklemeden önce, Chrome Android'in sorunları vardı. Artık tüm tarayıcılar düzgün çalışıyor gibi görünüyor.
— Bernie Sumption
Benim için iOS 8'de Safari'de çalışıyor
— Moritz Friedrich
Mükemmel çözüm. Diğerleri işe yaramadı. Neredeyse pes ediyordum ve bunun işe yarayacağından şüphe ediyordum. Ama öyle!
— Garconis
1
İhtiyaçlarım için mükemmel çalışıyor. Gerçekten geçiş kullanıyorum ve diğer yanıtlar PNG'min varsayılan durumunda pikselleşmesine neden oluyordu. Cevabınız, hem varsayılan durumda hem de geçiş sırasında herhangi bir pikselleşmenin kaldırılmasına yardımcı oldu. Mükemmel!
— Garconis
25

1px şeffaf kenarlık eklemek, kenar yumuşatmayı tetikler

outline: 1px solid transparent;

Alternatif olarak, 1px şeffaf kutu gölgesi ekleyin.

box-shadow: 0 0 1px rgba(255,255,255,0);
— Callam
kaynak
rgba (255, 255, 255, 0) muhtemelen daha iyidir
— mmm
4
Cevabınıza CSS'nin en üst bölümünü eklemek ve outline: 1px solid transparent;benim için iyi çalıştı. Yukarıdaki diğer çözümler yeterince iyi çalışmadı.
— Timothy Zorn
outline: 1px solid transparent;kenar yumuşatmayı Firefox 52'de de tetikle (Chrome ile aynı sorunları
— yaşıyor
18

3D dönüşümü deneyin. Bu bir cazibe gibi çalışıyor!

/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d; 
-webkit-transform: rotateZ(2deg);
— Ziferon
kaynak
1
Bunu şimdi chrome'da denemek (bir Mac'te Ağustos 2013), kabul edilen çözüm çalışmıyor, ancak bunu kullanmak (özellikle preserve-3d; rotatedeğiştirmeden yine de kullanılabilir rotateZ) işe yarıyor .
— Dave
Süper huysuz ama benim için çalıştı. Görünür bir yanlış hizalamayı önlemek için 0,05 gibi daha küçük bir derece deneyin.
— cpursley
preserve-3d hayatımı kurtardı.
— Hannes Schneidermayer
8

Seçilmiş yanıt (veya diğer yanıtların hiçbiri) benim için işe yaramadı, ancak bu işe yaradı:

img {outline:1px solid transparent;}

— Chris
kaynak
2

-45deg ile CSS3 gradyanıyla ilgili bir sorun yaşıyorum. backgroundEğimli, kötü benzeyen tırtıklı ancak orijinal yazı daha kötüydü. Bu yüzden ikisiyle de oynamaya başladım background-size. Bu pürüzlülüğü uzatırdı ama yine de oradaydı. Sonra ek olarak ben den ayarlanabilir böylece diğer insanlar 45deg kademelerledir çok sorunlar yaşıyorsanız okumak -45degiçin -45.0001degve benim sorunum çözüldü.

Aşağıdaki background-sizeCSS'imde başlangıçta vardı 30pxve degarka plan gradyanı -45degtamdı ve tüm ana kareler öyleydi 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;
        }
— Pegues
kaynak
1

Bulanık kutu gölgeleri kullanarak pürüzleri maskeleyebilirsiniz . Kutu gölgesi yerine -webkit-box-shadow kullanılması, webkit olmayan tarayıcıları etkilememesini sağlar. Yine de Safari ve mobil webkit tarayıcılarını kontrol etmek isteyebilirsiniz.

Sonuç biraz daha iyi, ancak yine de diğer tarayıcılardan çok daha az iyi:

kutu gölgeli (altta)

— dtech
kaynak
1

Chrome / Windows'ta da aynı sorunu yaşadığımız için çözümümüzü de ekleyeceğimizi düşündüm.

Çözümü yukarıda @stevenWatkins tarafından denedik, ancak yine de "adım atma" yaptık.

Onun yerine

-webkit-backface-visibility: hidden;

Kullandığımız: 

-webkit-backface-visibility: initial;

Bizim için hile yaptı 🎉

— Nicholas McCreath
kaynak
1

Söz konusu öğeyi çevreleyen div üzerine aşağıdakileri eklemek bunu benim için çözdü. 

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

Benim durumumda video penceresinin etrafında pürüzlü kenarlar görünüyordu.

— chaser7016
kaynak
0

Benim için hile yapan şey perspektif CSS özelliğiydi:

-webkit-perspective: 1000;

Benim durumumda 3 boyutlu geçişler kullanmadığım için tamamen mantıksız, ancak yine de çalışıyor.

— Aron
kaynak
0

Chrome'da tuval için (Sürüm 52)

Listelenen tüm yanıtlar resimlerle ilgilidir. Ancak benim sorunum, dönüşüm döndürme ile kromda tuval (v.52) ile ilgili. Pürüzlü hale geldiler ve tüm bu yöntemler yardımcı olamaz.

Benim için çalışan çözüm:

  1. Tuvali her bir kenar için 1 piksel üzerinde büyütme => genişlik ve yükseklik için +2 piksel;
  2. Uzaklık + 1 piksel (0,0 yerine 1,1 konumunda) ve sabit boyutta (görüntünün boyutu tuval boyutundan 2 piksel daha küçük olmalıdır) resim çizin
  3. Gerekli rotasyonu uygulayın

Çok önemli kod blokları: 

// 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>
Snippet'i genişlet

Örnek: https://jsfiddle.net/tLbxgusx/1/

Not: Projemden basitleştirilmiş bir sürüm olduğu için çok sayıda iç içe geçmiş div var.

Bu sorun benim için Firefox için de yeniden oluşturuldu . Safari ve retinalı FF'de böyle bir sorun yok.

Ve diğer bir temel çözüm , tuvali aynı boyuttaki div içine yerleştirmek ve aşağıdaki css'i bu div'e uygulamaktır:

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

Ve döndürme, bu sarmalama div öğesine uygulanmalıdır. Bu şekilde listelenen çözüm, küçük değişikliklerle çalışıldı.

Ve böyle bir çözüm için değiştirilmiş örnek: https://jsfiddle.net/tLbxgusx/2/

Not: 'Üçüncü' sınıfıyla div stiline bakın.

— Kiryl
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.