弹出框使用了
-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了、、坑多
用 2D 的 translate(-50%,-50%)就不會出現模糊啦
你好。測試發現在chrome中,使用translate3d,裡面的值用固定參數而不是百分比,如translate3d(50px,10px,10px), 則不會模糊。原因尚未明確。
個人猜測 當translate3d內的值為百分比時,實際計算出來的結果會出現小數,因為chrome渲染的原因,所以會模糊(FF不會出現邊框模糊) 。
例如在chrome中這樣 translate3d(50px,10.5px,10.5px),就會出現模糊。
可以看看這兩個實例,第一個實例展示了3D變換導致元素模糊,第二個實例模糊狀態得到淨化:
http://demo.codingplayboy.com...
http://demo.codingplayboy.com...
元素顯示模糊主要是因為使用了transform 3D變換,3D變換會開啟GPU加速,GPU加速動畫時,並不是把原生DOM傳遞給GPU,它產生一個元素圖像,把該圖像發送到GPU,GPU將圖像應用為多邊形紋理貼圖代表元素,GP U可以流暢快速的對這些多邊形進行旋轉,縮放,轉換,傾斜等變換,但由於只是傳遞元素圖像到GPU進行處理,所以它並不能重新渲染內容,圖像清晰度不能保證,元素顯示清晰度自然就下降了。
更多詳情可以看我的部落格http://blog.codingplayboy.com...
translate3d的那個Z,從0開始就會模糊,ios從大於1到開始也會出問題。 。
我也遇到這個問題,彈框寬高不固定的時候想要垂直居中對齊,用了translate3d後裡面的內容會模糊。
後來我用另外一種方式解決了垂直居中。 (在彈框前方加了個元素,height設定成100%,並且設定vertical-align:middle)
模糊的原因是因為元素的高度、寬度中有奇數, 使用translate(-50%,-50%)之後,相當於寬度、高度除以2的效果,會出現 0.5px。瀏覽器能分辨的最小像素為1px,因此出現了模糊。
所以使用translate(-50%,-50%)的時候,一定要 注意 讓 元素的 寬度、高度為偶數。
樓上正解!果然是設定了百分比引起的,可以在標題或內容的地方,設定多1px就搞定了~