CSS3转换模糊边界 [英] CSS3 Transformation blurry borders

问题描述

我在页面上有一个居中的形式，使用顶部和左侧的值以及css3变换。

 < div class = middle> 
< h1>这是模糊的，或应该是。< / h1> 
< / div> 
  

---

 。中间{
位置：绝对; 
 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.它不渲染模糊。

这里是没有BV的样子：

由于某种原因，人们看到边界模糊，但我不知道。我知道背景可见性：隐藏是为了解决这个问题，它对我来说，只是不是为了其他人使用与我奇怪的浏览器相同的浏览器。

解决方案

尝试 -50.1％

  transform：translateY translateX（-50.1％）; 
 

编辑：
我发现，当Chrome开发工具打开时，尝试关闭它们并刷新

I have a centered form on my page positioned using top and left values and css3 transformations.

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

Notice backface-visibility. When set to hidden, all problems are solved for me using chrome 42. It doesn't render blurry. For others however using the same chrome version, it renders blurry with it.

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

To you it may be blurry, to others it may not.

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

For some reason people see the border blurry however I do not. I know backface-visibility: hidden is meant to fix that, and it does for me, just not for others using the same browser as I. Strange.

解决方案

Try -50.1%

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

EDIT: I have found out, they are blurred when chrome dev tools are opened, try to close them and refresh

这篇关于CSS3转换模糊边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！