CSS3 Dönüştürme bulanık kenarlıklar

Question

Sayfanın üstünde, üst ve sol değerleri ve css3 dönüşümlerini kullanarak ortalanmış bir form var.

<div class="middle"> 
    <h1>This is blurry, or should be.</h1> 
</div> 

---

.middle { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    min-width: 390px; 

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

    /** backface-visibility: hidden; **/ 
} 

h1 { 
    padding-bottom: 5px; 
    border-bottom: 3px solid blue 
} 

Bildirim backface-görünürlük. Gizli olarak ayarlandığında, tüm sorunlar benim için 42 krom kullanılarak çözülür. Bu, bulanıklaşmaz. Bununla birlikte, aynı krom versiyonunu kullanan başkaları için, onunla bulanıklaşır.

İşte BV olmadan şu şekilde görünür: Sana http://jsfiddle.net/mzws2fnp/

o olmayabilir başkalarına, bulanık olabilir.

İşte BV ile şu şekilde görünür: nedense insanlar için http://jsfiddle.net/mzws2fnp/2/

ancak bilmiyorum sınır bulanık görüyoruz. Arkadan görünüşünüzü biliyorum: Gizli olanı düzeltmek, ve benim için değil, sadece I Garip ile aynı tarayıcıyı kullanan diğer kullanıcılar için değil.

Answer 1

Bu, Google Chrome'daki bir hatadır.

Rendering bug in css transform: it blurrs borders

<div class="middle"> 
    <input type="text" /> 
</div> 
.middle { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translateY(-50%) translateX(-50%); 
    transform: translateY(-50%) translateX(-50%); 
} 
input { 
    border: 1px solid black; 
    border-radius: 4px; 
} 
var middle = document.querySelector('.middle'); 
setInterval(function(){ 
    middle.style.paddingTop = middle.style.paddingTop === "0px" ? "1px" : "0px"; 
}, 1000); 

Animated bug demonstration

Answer 2

deneyin -50,1%

transform: translateY(-50%) translateX(-50.1%); 

DÜZENLEME: Ben öğrendim, onlar krom bulanık I bu sorunu Google'a rapor dev araçlar açılır, onları kapatmaya ve

01 yenilemeye çalışın