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报告了此问题：

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 3

使用百分比时，将播放一个奇数。边框会模糊 使用parseInt分配值是整数。

$(document).ready(function(){


   $('.middle').css({ 
            'top':parseInt($('.middle').position().top)+ 'px', 
            'left': parseInt($('.middle').position().left)+'px',
            'transform':'none',
            '-webkit-transform':'none' 
            });

});

.middle {
position: absolute;
top: 30%;
left: 50%;
min-width: 390px;

-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}

h1 {
padding-bottom: 5px;
border-bottom: 4px solid blue}

.middle2 {
position: absolute;
top: 70%;
left: 50%;
min-width: 390px;

-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}

h1 {
padding-bottom: 5px;
border-bottom: 4px solid blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">
<h1>This is blurry, or should be.</h1>
</div>


<div class="middle2">
<h1>This is blurry, or should be.</h1>
</div>

Answer 4

在这种情况下，如果您使用实心边框，则可以尝试使用盒子阴影而不是边框​​作为解决方法。例如，将border-bottom: 3px solid blue;替换为box-shadow: 0px 3px 0px blue;

Answer 5

使用偶数（2像素或4像素）作为边框。奇数（3像素或5像素）使模糊。

border-bottom: 4px solid blue;

Answer 6

几乎没有骇客可以帮助您将任何障碍物作为中间位置。 在父项<div>中，我们在其中添加位置：相对，在属性下方添加

display: flex;
justify-content: center;

现在将align-self: center;属性添加到我们要使其居中居中的块中，确保该块为绝对位置。

Answer 7

因为翻译后的元素高度为奇数。当元素高度为偶数时，不会发生这种情况。

Answer 8

添加时会出现此问题

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

OR

transform: translate(-50%, -50%);

它仍然是chromium bugs list 中的一个未解决问题。