css3-translate3d-模糊bug - 为何使用了 css3 translate3d 会导致显示模糊？

Question

弹出框使用了

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

Answer 1

.Forget it, let’s not use 3D anymore, there are so many pitfalls

Answer 2

Use 2D translate(-50%,-50%) and there will be no blur

Answer 3

Hello. The test found that in chrome, when using translate3d, the values ​​inside use fixed parameters instead of percentages, such as translate3d(50px,10px,10px), which will not be blurry. The reason is not yet clear.
Personal guess: When the value in translate3d is a percentage, the actual calculated result will appear in decimals, which will be blurry due to chrome rendering (FF will not have border blur).
For example, if you do translate3d(50px,10.5px,10.5px) in chrome, blur will appear again.

Answer 4

You can take a look at these two examples. The first example shows that the 3D transformation causes the element to be blurred, and the second example shows that the blurred state is purified:
http://demo.codingplayboy.com...
http://demo.codingplayboy.com...

The

element appears blurry mainly because of the use of transform 3D transformation, 3D transformation will turn on GPU acceleration. When GPU accelerates animation, it does not pass the native DOM to the GPU. It generates an element image and sends the image to the GPU. The GPU applies the image as a polygon texture map to represent the element. The GPU can Smoothly and quickly perform rotation, scaling, conversion, tilt and other transformations on these polygons. However, since it only transfers element images to the GPU for processing, it cannot re-render the content, image clarity cannot be guaranteed, and element display clarity naturally decreases. .

For more details, please check my blog http://blog.codingplayboy.com...

Answer 5

The Z of translate3d will be blurry starting from 0, and there will be problems starting from greater than 1 on ios. .

Answer 6

I have also encountered this problem. When the width and height of the pop-up box are not fixed, I want to align it vertically and centrally. After using translate3d, the content inside will be blurred.
Later I solved the vertical centering problem in another way. (Add an element in front of the pop-up box, set the height to 100%, and set vertical-align: middle)

Answer 7

The reason for the blurring is that there are odd numbers in the height and width of the element. After using translate(-50%,-50%), the effect equivalent to dividing the width and height by 2 will be 0.5px. The smallest pixel the browser can resolve is 1px, hence the blur.

So when using translate(-50%,-50%), be sure to make the width and height of the element an even number.

Answer 8

The correct answer upstairs! Sure enough, it is caused by setting the percentage. You can set 1px more in the title or content and the problem will be solved~