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
}

注意背面可见性.当设置为隐藏时,使用chrome 42解决了所有问题.它不会变得模糊.对于其他人使用相同的chrome版本,它会使它变得模糊.

这是没有BV的样子:http://jsfiddle.net/mzws2fnp/

对你来说它可能是模糊的,对其他人可能不是.

以下是BV的样子:http://jsfiddle.net/mzws2fnp/2/

出于某种原因,人们看到边界模糊,但我没有.我知道背面 - 可见性:隐藏是为了解决这个问题,它对我有用,而不是对其他人使用与我相同的浏览器.

Answer 1

试试-50.1%

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

编辑:我发现,当chrome dev工具打开时,它们会模糊,尝试关闭它们并刷新

Answer 2

这是 Google Chrome 中的一个错误。我向 Google 报告了这个问题：

css 变换中的渲染错误：它模糊了边框

<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);

动画错误演示