問(wèn)題描述

彈出框使用了

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

來(lái)使彈出框垂直居中。，但是彈出框變模糊了。彈出框的樣式為

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

問(wèn)題解答

.算了，還是不用3d了、、坑多

用 2D 的 translate(-50%,-50%)就不會(huì)出現(xiàn)模糊啦

你好。測(cè)試發(fā)現(xiàn)在chrome中，使用translate3d，里面的值用固定參數(shù)而不是百分比，如translate3d(50px,10px,10px), 則不會(huì)模糊。原因尚未明確。個(gè)人猜測(cè) 當(dāng)translate3d內(nèi)的值為百分比時(shí)，實(shí)際計(jì)算出來(lái)的結(jié)果會(huì)出現(xiàn)小數(shù)，因?yàn)閏hrome渲染的原因，所以會(huì)模糊(FF不會(huì)出現(xiàn)邊框模糊) 。 比如在chrome中這樣 translate3d(50px,10.5px,10.5px)，就又會(huì)出現(xiàn)模糊。

可以看看這兩個(gè)實(shí)例，第一個(gè)實(shí)例展示了3D變換導(dǎo)致元素模糊，第二個(gè)實(shí)例模糊狀態(tài)得到凈化：http://demo.codingplayboy.com...http://demo.codingplayboy.com...

元素顯示模糊主要是因?yàn)槭褂昧藅ransform 3D變換,3D變換會(huì)開(kāi)啟GPU加速，GPU加速動(dòng)畫(huà)時(shí)，并不是把原生DOM傳遞給GPU，它生成一個(gè)元素圖像，把該圖像發(fā)送到GPU，GPU將圖像應(yīng)用為多邊形紋理貼圖代表元素，GPU可以流暢快速的對(duì)這些多邊形進(jìn)行旋轉(zhuǎn)，縮放，轉(zhuǎn)換，傾斜等變換，但由于只是傳遞元素圖像到GPU進(jìn)行處理，所以它并不能重新渲染內(nèi)容，圖像清晰度不能保證，元素顯示清晰度自然就下降了。

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

translate3d的那個(gè)Z，從0開(kāi)始就會(huì)模糊，ios上從大于1到開(kāi)始也會(huì)出問(wèn)題。。

我也遇到過(guò)這個(gè)問(wèn)題，彈框?qū)捀卟还潭ǖ臅r(shí)候想要垂直居中對(duì)齊，用了translate3d后里面的內(nèi)容會(huì)模糊。后來(lái)我用另外一種方式解決了垂直居中。(在彈框前面加了個(gè)元素,height設(shè)置成100%,并且設(shè)置vertical-align:middle)

出現(xiàn)模糊的原因是因?yàn)樵氐母叨取挾戎杏衅鏀?shù)， 使用translate(-50%,-50%)之后，相當(dāng)于寬度、高度除以2的效果，會(huì)出現(xiàn) 0.5px。瀏覽器能分辨的最小像素為1px，因此出現(xiàn)了模糊。

所以使用translate(-50%,-50%)的時(shí)候，一定要 注意 讓 元素的 寬度、高度為偶數(shù)。

樓上正解！果然是設(shè)置了百分比引起的，可以在標(biāo)題或者內(nèi)容的地方，設(shè)置多1px就搞定了~