CSS3 Trasformazione bordi sfocati

Question

Ho una forma centrata sulla mia pagina posizionata utilizzando i valori superiore e sinistro e le trasformazioni 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 
} 

Avviso backface-visibilità. Se impostato su nascosto, tutti i problemi vengono risolti utilizzando Chrome 42. Non viene visualizzato sfocato. Per gli altri, tuttavia, utilizzando la stessa versione di Chrome, ne risulta sfocata.

Ecco come si presenta senza BV: http://jsfiddle.net/mzws2fnp/

A voi può essere sfocata, per gli altri non può.

Ecco come si presenta con BV: http://jsfiddle.net/mzws2fnp/2/

per qualche motivo la gente vede il confine sfocata però non lo faccio. Conosco la visibilità del backface: hidden è pensato per risolverlo, e lo fa per me, non solo per gli altri che usano lo stesso browser di me. Strano.

Answer 1

Questo è un bug in Google Chrome. Ho segnalato questo problema a 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

Prova -50,1%

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

EDIT: ho scoperto, sono sfocate quando Chrome gli strumenti dev sono aperti, prova a chiuderli e aggiorna