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/

出于某种原因，人们看到边界模糊，但我却看不到。我知道 backface-visibility: hidden 是为了解决这个问题，它对我有用，只是对与我使用相同浏览器的其他人不适用。奇怪。

Answer 1

尝试-50.1%

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

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