CSS dönüşümü kullandıktan sonra bulanık metin: scale (); Chrome'da

Görünüşe göre, Google Chrome'da, a yaptıktan sonra bulanık metne neden olan bir güncelleme yapılmış transform: scale(). Özellikle şunu yapıyorum:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Chrome'da http://rourkery.com adresini ziyaret ederseniz , sorunu ana metin alanında görmeniz gerekir. Bunu yapmıyordu ve diğer webkit tarayıcılarını (Safari gibi) etkilemiyor gibi görünüyor. 3B dönüşümlerle benzer bir sorun yaşayan insanlar hakkında başka yazılar da vardı, ancak bunun gibi 2d dönüşümler hakkında hiçbir şey bulamıyorlar.

Herhangi bir fikir takdir edilecektir, teşekkürler!

Bu sorunu birkaç kez yaşıyorum ve düzeltmenin 2 yolu var gibi görünüyor (aşağıda gösterilmiştir). Oluşturmayı düzeltmek için bu özelliklerden birini veya aynı anda ikisini birden kullanabilirsiniz.

Gizli arka yüz görünürlüğü, animasyonu nesnenin sadece önüne kadar basitleştirdiği için sorunu çözer, oysa varsayılan durum ön ve arka durumdur.

backface-visibility: hidden;

TranslateZ, animasyona donanım ivmesi eklemek için bir hack olarak da çalışır.

transform: translateZ(0);

Bu özelliklerin her ikisi de yaşadığınız sorunu giderir ancak bazı insanlar da eklemeyi sever

-webkit-font-smoothing: subpixel-antialiased;

animasyonlu nesnelerine. Bir web yazı tipinin oluşturulmasını değiştirebileceğini ancak bu yöntemi denemekten de çekinmeyin.

Özellikle bulanıklığı iyileştirmek için. Chrome'da şunu yapmayı deneyin:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

GÜNCELLEME: Perspektif , nesneyi teknik olarak ölçeklendiren ve bulanıklığın 'kalıcı' görünmesini sağlayan z düzlemi ile kullanıcı arasındaki mesafeyi ekler. perspective(1px)Yukarıdaki gibidir ördek kaset biz çözmeye çalışıyoruz bulanıklık eşleşen çünkü. Aşağıdaki css ile daha iyi şansınız olabilir:

transform: translateZ(0);
backface-visibility: hidden;

Ölçek oranını ayarlamanın biraz yardımcı olduğunu buldum.

Üzerinde kullanmak scale(1.048), (1.05)tam piksel yazı tipi boyutuna daha iyi bir yaklaşım oluşturarak alt piksel bulanıklığını azalttı.

Ayrıca translateZ(0), dönüşüm animasyonunda Chrome'un son yuvarlama adımını ayarlıyor gibi görünen kullandım . Bu, onhover kullanımım için bir artı çünkü hızı artırıyor ve görsel gürültüyü azaltıyor. Ancak bir onclick işlevi için bunu kullanmam çünkü dönüştürülen yazı tipi o kadar çıtır görünmüyor.

Beni edilmiş nihayet bu sorunu giderdik ne olursa şans ile burada başka her şeyi denedikten sonra kaldırarakwill-change: transform; özelliği. Bazı nedenlerden dolayı, Chrome'da korkunç derecede bulanık görünen ölçeklemeye neden oldu, ancak Firefox'ta değil.

Onun yerine

transform: scale(1.5);

kullanma

zoom : 150%;

Chrome'daki metin bulanıklaştırma sorununu düzeltir.

Bu, Chrome'da (Sürüm 56.0.2924.87) bir hata olmalıdır, ancak aşağıdaki, konsoldaki css özelliklerini değiştirirken ('. 0') bulanıklığı benim için düzeltir. Rapor edeceğim.

filter: blur(.0px)

Sunderls beni cevaba götürüyor. Hariç filter: scaleyok, ama filter: blurvar.

Sonraki bildirimleri bulanık görünen öğelere uygulayın (benim durumumda bunlar dönüştürülmüş bir öğenin içindeydiler):

backface-visibility: hidden;    
-webkit-filter: blur(0);

Bu neredeyse mükemmel çalıştı. " Neredeyse " çünkü bir geçiş kullanıyorum ve geçiş sırasında öğeler mükemmel görünmüyor, ancak geçiş tamamlandığında görünüyorlar.

Sorunun herhangi bir şekilde göreceli dönüşümlerde ortaya çıktığını öğrendim. translateX (% 50), ölçek (1.1) veya her ne olursa olsun. mutlak değerler sağlamak her zaman işe yarar (bulanık metin (ures) üretmez).

Burada bahsedilen çözümlerin hiçbiri işe yaramadı ve henüz bir çözüm olmadığını düşünüyorum (bunu yazarken Chrome 62.0.3202.94 kullanarak).

Benim durumumda transform: translateY(-50%) translateX(-50%)bulanıklığa neden oluyor (bir iletişim kutusunu ortalamak istiyorum).

Biraz daha "mutlak" değerlere ulaşmak için, ondalık değerleri olarak ayarlamak zorunda kaldım transform: translateY(-50.09%) translateX(-50.09%).

NOT

Bu değerlerin farklı ekran boyutlarına göre değiştiğinden oldukça eminim. Birine yardımcı olur diye deneyimlerimi paylaşmak istedim.

Çok daha iyi ve temiz bir çözüm buldum:

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

veya

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

Bu gönderi sayesinde: Transform ile bulanık oluşturmayı önleme: ölçek

Eklemek perspective(1px)benim için çalıştı.

transform: scale(1.005);

için

transform: scale(1.005) perspective(1px);

zoom: 101%;Yakınlaştırma + ölçekleme kombinasyonunu kullanamadığınızda karmaşık tasarımlar için kullanmayı deneyin .

Benim durumumda aşağıdaki kod bulanık yazı tipine neden oldu:

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

ve sadece yakınlaştırma özelliği eklemek benim için düzeltildi. Yakınlaştırma ile oynayın, aşağıdakiler benim için çalıştı:

zoom: 97%;   

Chrome'da bulanık dönüşümler (translate3d, scaleX) için bulduğum başka bir düzeltme, öğeyi " display: inline-table ;" olarak ayarlamaktır. Bazı durumlarda (X ekseninde) piksel yuvarlamayı zorlar gibi görünüyor.

Chrome altında alt piksel konumlandırmasının amaçlandığını okudum ve geliştiriciler bunu düzeltmeyecek.

2019 Güncellemesi
Chrome görüntüleme hatası hala düzeltilmemiş ve kullanıcıların hatası olmamasına rağmen, bu web sitesinin tamamında sunulan önerilerin hiçbiri sorunu çözmeye yardımcı olmuyor. Her birini boşuna denediğim konusunda hemfikir olabilirim: yalnızca 1 yaklaşır ve bu css kuralı: filter: blur (0); Bu, bir kabın 1 piksel kaydırılmasını ortadan kaldırır, ancak kabın kendisinin ve sahip olabileceği herhangi bir içeriğin bulanık görüntüleme hatasını çözmez.

İşte gerçek: bu sorunun tam anlamıyla bir çözümü yok, bu yüzden işte akışkan web siteleri için bir çalışma.

CASE
Şu anda akışkan bir web sitesi geliştiriyorum ve tümü vurgulu efektlerle ortalanmış ve hem genişlik hem de konumda yüzde değerleri paylaşan 3 div'ım var. Chrome hatası, solda ayarlanan merkez kapsayıcıda meydana geliyor:% 50; ve dönüştürün: translateX (-% 50); ortak bir ayar.

ÖRNEK: Önce HTML ...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

İşte Chrome hatasının oluştuğu CSS ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

İşte düzeltilmiş css ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

Hatalı keman: https://jsfiddle.net/m9bgrunx/2/
Sabit keman: https://jsfiddle.net/uoc6e2dm/2/

Görebileceğiniz gibi, CSS'de küçük bir değişiklik, konumlandırma için dönüştürme kullanma gereksinimini azaltmalı veya ortadan kaldırmalıdır. Bu aynı zamanda sabit genişlikli web siteleri için de geçerli olabilir.

Bende de aynı sorun var. Bunu kullanarak düzelttim:

.element {
  display: table
}

Benim çözümüm şuydu:

ekran: başlangıç;

Sonra gevrek keskindi

Yukarıdakilerin hiçbiri benim için işe yaramadı. Bu animasyonu pop-up'lar için yaptım:

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

Benim durumumda, bu kuralı uyguladıktan sonra bulanık efekt kayboldu: -webkit-perspective: 1000;Chrome denetçisinde kullanılmamış olarak işaretlenmiş olsa bile.

Yukarıdakilerin hiçbiri benim için işe yaramadı.

Perspektif eklediğimde işe yaradı

Yani

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

değiştim

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

Durumumu ekleyerek düzelttim:

transform: perspective(-1px)

KORME İÇİN:

Buradaki tüm önerileri denedim. Ama işe yaramaz. Üniversitem daha iyi çalışan harika bir çözüm buldu:

1.0'ı geçmemelisiniz

translateZ(0)Fareyle üzerine gelindiğinde ekleyin , ancak fareyle üzerine gelme / başlangıç ​​konumunda DEĞİL.

Misal:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

Tüm cevapların bir kombinasyonunu kullandım ve sonunda benim için işe yarayan şey buydu:

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

Chrome'da bulanık metin sorunuyla karşı karşıyaydım, ancak kullandığımda Firefox'ta değil transform: translate(-50%,-50%).

Şey, gerçekten çok sayıda geçici çözümü denedim:

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

Bunların hiçbiri benim için işe yaramadı.

Son olarak, elemanın yüksekliğini ve genişliğini eşitledim. Benim için sorunu çözdü !!!

Not: Kullanım durumundan kullanım durumuna bağlı olabilir. Ama kesinlikle denemeye değer!

Bu cevaplardan çok sayıda örnek denedim, maalesef Chrome için hiçbir şey yardımcı olmadı Version 81.0.4044.138 , bunun yerine dönüştürme öğesine ekledim

 transform-origin: 50% 50%;

Bu

 transform-origin: 51% 51%;

bana yardımcı oluyor

Benim için sorun, öğelerimin kullanıyor olmasıydı transformStyle: preserve-3d. Bunun uygulama için aslında gerekli olmadığını ve kaldırılmasının bulanıklığı düzelttiğini fark ettim.

Bunu kodumdan kaldırdım transform-style: preserve-3d; ve bunu ekledim - transform: perspective(1px) translateZ(0);

bulanıklık gitti!

5-25-19'dan itibaren geçerli olan Chrome 74.0.3729.169'da, dönüşümün neden olduğu belirli tarayıcı yakınlaştırma düzeylerinde oluşan bulanıklık için herhangi bir düzeltme yok gibi görünüyor. Basit bir şey bile TransformY(50px)öğeyi bulanıklaştırır. Bu, Firefox, Edge veya Safari'nin mevcut sürümlerinde görülmez ve tüm yakınlaştırma düzeylerinde görülmez.

Sadece css ile çözmek zor olacak.

Ben de jquery ile çözdüm.

Bu benim CSS'm.

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

ve bu benim jquery.

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}

Sadece düzeltme çılgınlığına eklemek için, kötü görünen nesnenin etrafına {border: 1px solid # ???} koymak sorunu benim için düzeltir. Sabit bir arka plan renginiz varsa, bunu da düşünün. Bu o kadar aptalca ki kimse bahsetmeyi düşünmedi sanırım, eh eh.

bunu filterdüzeltmek için css kullanabilirsiniz .

.element {
    filter: blur(0);
}

Satıcı öneki hakkında, lütfen bunu kendiniz yapın. -webkit-filter, -ms-filter. ayrıntı burada http://browser.colla.me/show/css_transformation_scale_cause_bluring

Yapmazsanız metin bulanık olmayacaktır transition.transform .

Sadece şunu yap:

&:hover {
    transform: scale(1.1);
}

Gibi geçiş olmadantransition: all .2s;