CSS3 Blurred Border Transformation

Question

I have a centered form on my page using top and left values ​​and css3 transforms.

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

Pay attention to reverse visibility. When set to hidden, all problems are solved for me using chrome 42. It does not blur. For others, however, using the same chrome version, it erodes it.

Here's what it looks like without a BV: http://jsfiddle.net/mzws2fnp/

This may be blurry for you; it may not be the other.

Here's what it looks like with BV: http://jsfiddle.net/mzws2fnp/2/

For some reason, people see that the border is blurred, but I do not. I know the reverse visibility: the hidden is intended to fix this, and this is for me, just for others using the same browser as me. It’s strange.

Answer 1

Try -50.1%

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

EDIT: I found out that they are blurry when chrome dev tools open, try closing them and updating

Answer 2

This is a bug in Google Chrome. I reported this issue to Google:

Error rendering in css transform: it blurs the 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 Show