【CSS】为何使用了 css3 translate3d 会导致显示模糊?

图片描述

弹出框使用了

  -webkit-transform: translate3d(-50%, -50%, 0);

来使弹出框垂直居中。,但是弹出框变模糊了。

弹出框的样式为

.pop-alert {

position: fixed;

left: 50%;

top: 50%;

-webkit-transform: translate3d(-50%, -50%, 0);

transform: translate3d(-50%, -50%, 0);

z-index: 999;

min-width: 400px;

border: 4px solid rgba(0,0,0,.5);

background-color: #fff;

padding: 5px;

text-align: left;

}

回答:

可以看看这两个实例,第一个实例展示了3D变换导致元素模糊,第二个实例模糊状态得到净化:
http://demo.codingplayboy.com...
http://demo.codingplayboy.com...

元素显示模糊主要是因为使用了transform 3D变换,3D变换会开启GPU加速,GPU加速动画时,并不是把原生DOM传递给GPU,它生成一个元素图像,把该图像发送到GPU,GPU将图像应用为多边形纹理贴图代表元素,GPU可以流畅快速的对这些多边形进行旋转,缩放,转换,倾斜等变换,但由于只是传递元素图像到GPU进行处理,所以它并不能重新渲染内容,图像清晰度不能保证,元素显示清晰度自然就下降了。

更多详情可以查看我的博客http://blog.codingplayboy.com...

回答:

出现模糊的原因是因为元素的高度、宽度中有奇数, 使用translate(-50%,-50%)之后,相当于宽度、高度除以2的效果,会出现 0.5px。像素就是最小的单位了,要么1,2,3,要么就是0,没有小数。

比方说一个Div的高度是100.5px,在Chrome浏览器在渲染的时候,会渲染成100px、101px、100px、101px、100px .... 100px 和 101px 交替渲染,就出现了模糊。

所以使用translate(-50%,-50%)的时候,一定要 注意 让 元素的 宽度、高度为偶数,这样除以2的时候,才不会出现小数的像素。

回答:

你好。测试发现在chrome中,使用translate3d,里面的值用固定参数而不是百分比,如translate3d(50px,10px,10px), 则不会模糊。原因尚未明确。
个人猜测 当translate3d内的值为百分比时,实际计算出来的结果会出现小数,因为chrome渲染的原因,所以会模糊(FF不会出现边框模糊) 。
比如在chrome中这样 translate3d(50px,10.5px,10.5px),就又会出现模糊。

回答:

搜索了半天无果, 发现chromium的bug report里有这个bug: https://bugs.chromium.org/p/c...

里面有段这样的回答:
如果将合成图层定位在小数偏移处,则文本看起来会模糊,因为它必须在合成图层的固定偏移处绘制。 似乎没有办法解决这个问题; 捕捉合成的图层或其中的内容将具有其他不可忽视的副作用。

由于%转换,文本合成图层处于小数偏移。 对此页面的一个简单修复可能是使用精确的像素偏移。

英文原文:
If you position a composited layer at a fractional offset, the text will look blurry, because it has to be drawn at a fixed offset from the composited layer. There seems to be no way around this; snapping composited layers or contents within them will have other indesireable side-effects.

The text composited layer is at a fractional offset because of the % translation. A simple fix for this page could be to use an exact pixel offset instead.

回答:

用 2D 的 translate(-50%,-50%)就不会出现模糊啦

回答:

translate3d的那个Z,从0开始就会模糊,ios上从大于1到开始也会出问题。。

回答:

我也遇到过这个问题,弹框宽高不固定的时候想要垂直居中对齐,用了translate3d后里面的内容会模糊。
后来我用另外一种方式解决了垂直居中。(在弹框前面加了个元素,height设置成100%,并且设置vertical-align:middle)

回答:

果然是设置了百分比引起的,可以在标题或者内容的地方,设置多1px就搞定了~

回答:

我的宽度只能设置百分比咋整呢,而且很多情况都是不能设置固定值的吧

以上是 【CSS】为何使用了 css3 translate3d 会导致显示模糊? 的全部内容, 来源链接: utcz.com/a/156264.html

回到顶部