DWQA QuestionsCategory: ProgramWhy does the use of CSS3 translate3d result in blurred display?
jurely asked 3 years ago

Why does the use of CSS3 translate3d result in blurred display?
The pop-up box is used

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

To center the pop-up box vertically. But the pop-up box blurred.
The style of the pop-up box is

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

11 Answers
Best Answer
Amazing answered 3 years ago

Look at these two examples. The first example shows that 3D transformation results in element blurring, and the second example purifies the blurred state.
http://demo.codingplayboy.com…
http://demo.codingplayboy.com…
Element display blurring is mainly due to the use of transform 3D transformation, 3D transformation will open GPU acceleration, GPU acceleration animation, not the original DOM to the GPU, it generates an element image, the image is sent to the GPU, GPU will apply the image as a polygon texture mapping representative elements, GPU can smooth and fast for these many. The edge is rotated, scaled, converted, tilted and so on, but because it only transfers the element image to GPU for processing, it can not re-render the content, the image clarity can not be guaranteed, and the element display clarity naturally decreases.
For more details, check out my bloghttp://blog.codingplayboy.com…

Fly higher answered 3 years ago

The reason for the ambiguity is that there are odd numbers in the height and width of the element. When translate (-50%, -50%) is used, the effect of dividing the width and height by 2 will be 0.5px. Pixel is the smallest unit, either 1, 2, 3, or 0, no decimal.
For example, a Div’s height is 100.5px. When Chrome browser renders, it will render 100px, 101px, 100px, 101px, 100px…. 100px and 101px alternately, and then blur appears.
So when translat (- 50%, – 50%) is used, it is important to make the width and height of the element even, so that when divided by 2, decimal pixels will not appear.

In thinking answered 3 years ago

With 2D translate (-50%, -50%) there will be no ambiguity.

Pale leaf tree answered 3 years ago

Hello. The test found that in chrome, translate3d is used, and the values in translate3d (50px, 10px, 10px) are not ambiguous with fixed parameters rather than percentages. The reason is not yet clear.
Personal guess is that when the value in translate3d is a percentage, the actual result will appear decimal, because the chrome rendering reason, so it will be blurred (FF will not appear blurred border).
For example, in chrome, translate3d (50px, 10.5px, 10.5px) will appear blurred again.

It tastes good. answered 3 years ago

Inadvertently see this question, so many answers, unexpectedly only one person mentioned that the outer box needs to be even, so that 50% can.

Zero one zero one answered 3 years ago

After searching for half a day, it was found that there was a bug in chromium’s bug report:https://bugs.chromium.org/p/c…
There is an answer like this:
If the composite layer is positioned at the decimal offset, the text will look blurred because it must be drawn at the fixed offset of the composite layer. There seems to be no way to solve this problem; capturing composite layers or their contents will have other undeniable side effects.
Because of% conversion, the text synthesis layer is in decimal offset. A simple fix to this page might be to use precise pixel offsets.
English text:
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.

Fish that don't like tomatoes answered 3 years ago

The Z of translate3d will be blurred from 0, and there will be problems on IOS from greater than 1 to the beginning.

youmyyou answered 3 years ago

I’ve also encountered this problem. When the width and height of the cartridge frame are not fixed, it wants to be centered vertically. The contents of the cartridge frame will be blurred after translate for 3 days.
Later, I solved the problem of vertical centralization in another way. (Add an element in front of the cartridge frame, set height to 100%, and set vertical-align: middle)

Bluestone answered 3 years ago

Sure enough, it’s caused by setting percentage. You can set more than 1 PX in the title or content.~

White grass answered 3 years ago

My width can only be set as a percentage, and in many cases it is impossible to set a fixed value.

jurely answered 3 years ago

Forget it, it doesn’t take 3 days, more pits.