CSS3 Transformacja rozmyte granice

Question

Mam wyśrodkowany formularz na mojej stronie pozycjonowany przy użyciu wartości górnych i lewych oraz transformacji css3.

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

Wskazówka tylna widoczności. Po ustawieniu na ukryty wszystkie problemy są rozwiązywane za pomocą chrome 42. Nie powoduje to rozmycia. Jednak dla innych użytkowników, którzy używają tej samej wersji chrome, staje się ona nieostra.

Oto jak to wygląda bez BV: http://jsfiddle.net/mzws2fnp/

Dla ciebie może to być rozmyte, dla innych może nie.

Oto jak to wygląda z BV: http://jsfiddle.net/mzws2fnp/2/

Dla niektórych osób Uzasadnienie Zob granica rozmyte jednak nie mam. Wiem, że widoczność z tyłu: ukryty ma to naprawić, i robi to dla mnie, po prostu nie dla innych używających tej samej przeglądarki co I. Dziwne.

Answer 1

To jest błąd w Google Chrome. Zgłosiłem ten problem do Google:

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

Spróbuj -50,1%

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

EDIT: I odkryli, że są nieostre chrom Narzędzia deweloperskie są otwarte, spróbuj je zamknąć i odśwież