CSS3 Трансформация размытых границ

Question

У меня есть центрированная форма на моей странице с использованием верхних и левых значений и преобразований 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 
} 

Уведомление противоположная сторона-видимость. Когда установлено на скрытое, все проблемы решаются для меня, используя хром 42. Он не размывается. Для других, однако, используя ту же самую хромовую версию, она становится размытой.

Вот как он выглядит без BV: http://jsfiddle.net/mzws2fnp/

Для вас это может быть размыто, к другим он не может.

Вот как это выглядит с БВ: http://jsfiddle.net/mzws2fnp/2/

По некоторым причинам люди видят границы размыто, однако я не знаю. Я знаю обратную видимость: скрытое предназначено для исправления этого, и это для меня, просто для других, использующих тот же браузер, что и я. Странный.

Answer 1

Это ошибка в Google Chrome. Я сообщил об этой проблеме в 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

Try -50,1%

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

EDIT: я обнаружил, они размыты, когда хром инструменты dev открыты, попробуйте закрыть их и обновить