Pop-up box uses
-webkit-transform: translate3d(-50%, -50%, 0);
to center the pop-up box vertically. But the pop-up box is 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: -sharpfff;
padding: 5px;
text-align: left;
}
is blurred is that there are odd numbers in the height and width of the element. After using translate (- 50% maxim 50%), it is equivalent to the effect of dividing width and height by 2, and 0.5px will appear. The pixel is the smallest unit, either 1, 2, 3, or 0. There is no decimal.
for example, the height of a Div is 100.5px. When the Chrome browser renders, it will render as 100px, 101px, 100px, 101px, 100px. Blur occurs when 100px and 101px are rendered alternately.
therefore, when using translate (- 50% maxim 50%), be sure to make sure that the width and height of the element are even, so that decimal pixels do not appear when divided by 2.
Hello. The test found that in chrome, using the values in translate3d, with fixed parameters rather than percentages, such as translate3d (50px Magi 10px Magi 10px), will not be blurred. The reason is not clear.
personally guess that when the value in translate3d is a percentage, the actual calculated result will appear decimal, which will be blurred because of chrome rendering (FF will not appear border blur).
for example, in chrome, such as translate3d (50px Magi 10.5px Magi 10.5px), there will be blurring again.
you can take a look at these two examples. The first example shows that the element is blurred by 3D transformation. In the second example, the fuzzy state is purified:
http://demo.codingplayboy.com.
http://demo.codingplayboy.com.
element display blur is mainly due to the use of transform 3D transformation, which enables GPU acceleration. When GPU accelerates animation, it does not pass the native DOM to GPU, to generate an element image, send the image to GPU,GPU and apply the image as a polygon texture map representative element. GPU can rotate, scale, transform, tilt and other polygons smoothly and quickly. However, because it only transmits the element image to the GPU for processing, it can not re-render the content, and the image sharpness can not be guaranteed, so the element display sharpness is naturally reduced.
for more details, check out my blog http://blog.codingplayboy.com.
. there is an answer like this:
if you position the composite layer 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 solution to this problem; capturing composite layers or their contents will have other side effects that cannot be ignored.
the text composition layer is at a decimal offset due to% conversion. A simple fix for this page might be to use a precise pixel offset.
English original 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.
using 2D translate (- 50% translate 50%), there will be no blurring
The Z oftranslate3d is blurred from 0, and there is a problem with ios from greater than 1 to the beginning. no, no, no.
I have also encountered this problem. If you want to center vertically when the width and height of the box is not fixed, the content will be blurred after using translate3d.
later I solved vertical centering in a different way. (an element is added in front of the pop-up box, height is set to 100%, and vertical-align:middle is set)
is really caused by setting the percentage. You can set more 1px in the title or content.
my width can only set the percentage, and in many cases, you can't set a fixed value
.