css - CSS3 Transformation blurry borders -

css - CSS3 Transformation blurry borders -

i have centered form on page positioned using top , left values , css3 transformations.

<div class="middle"> <h1>this 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 bluish }

notice backface-visibility. when set hidden, problems solved me using chrome 42. doesn't render blurry. others using same chrome version, renders blurry it.

here's looks without bv: http://jsfiddle.net/mzws2fnp/

to may blurry, others may not.

here's looks bv: http://jsfiddle.net/mzws2fnp/2/

for reason people see border blurry not. know backface-visibility: hidden meant prepare that, , me, not others using same browser i. strange.

this bug in google chrome. reported issue google:

rendering bug in css transform: 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

css css3