我的页面上有一个居中的表单,使用顶部和左侧值以及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/的样子
出于某种原因,人们看到边界模糊,但我没有.我知道背面 – 可见性：隐藏是为了解决这个问题,而且它对我有用,而不是对于使用与我相同的浏览器的其他人.
解决方法
试试-50.1％
transform: translateY(-50%) translateX(-50.1%);
编辑：我发现,当chrome dev工具打开时,它们会模糊,尝试关闭它们并刷新
