国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術文章
文章詳情頁

css3-translate3d-模糊bug - 為何使用了 css3 translate3d 會導致顯示模糊?

瀏覽:93日期:2023-07-29 10:50:57

問題描述

css3-translate3d-模糊bug - 為何使用了 css3 translate3d 會導致顯示模糊?

彈出框使用了

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

問題解答

回答1:

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

回答2:

用 2D 的 translate(-50%,-50%)就不會出現模糊啦

回答3:

你好。測試發現在chrome中,使用translate3d,里面的值用固定參數而不是百分比,如translate3d(50px,10px,10px), 則不會模糊。原因尚未明確。個人猜測 當translate3d內的值為百分比時,實際計算出來的結果會出現小數,因為chrome渲染的原因,所以會模糊(FF不會出現邊框模糊) 。 比如在chrome中這樣 translate3d(50px,10.5px,10.5px),就又會出現模糊。

回答4:

可以看看這兩個實例,第一個實例展示了3D變換導致元素模糊,第二個實例模糊狀態得到凈化:http://demo.codingplayboy.com...http://demo.codingplayboy.com...

元素顯示模糊主要是因為使用了transform 3D變換,3D變換會開啟GPU加速,GPU加速動畫時,并不是把原生DOM傳遞給GPU,它生成一個元素圖像,把該圖像發送到GPU,GPU將圖像應用為多邊形紋理貼圖代表元素,GPU可以流暢快速的對這些多邊形進行旋轉,縮放,轉換,傾斜等變換,但由于只是傳遞元素圖像到GPU進行處理,所以它并不能重新渲染內容,圖像清晰度不能保證,元素顯示清晰度自然就下降了。

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

回答5:

translate3d的那個Z,從0開始就會模糊,ios上從大于1到開始也會出問題。。

回答6:

我也遇到過這個問題,彈框寬高不固定的時候想要垂直居中對齊,用了translate3d后里面的內容會模糊。后來我用另外一種方式解決了垂直居中。(在彈框前面加了個元素,height設置成100%,并且設置vertical-align:middle)

回答7:

出現模糊的原因是因為元素的高度、寬度中有奇數, 使用translate(-50%,-50%)之后,相當于寬度、高度除以2的效果,會出現 0.5px。瀏覽器能分辨的最小像素為1px,因此出現了模糊。

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

回答8:

樓上正解!果然是設置了百分比引起的,可以在標題或者內容的地方,設置多1px就搞定了~

標簽: CSS
相關文章:
主站蜘蛛池模板: 亚洲国产高清在线精品一区 | 欧美日韩一区二区不卡三区 | 中国美女隐私无遮挡免费视频 | 波多野结衣视频免费在线观看 | 欧美三级在线看 | 男女男精品视频网站在线观看 | 57pao强力打造手机版 | 3至13呦女毛片 | 特级毛片全部免费播放器 | 国产在线不卡视频 | 国产在线欧美日韩精品一区二区 | 中文字幕精品一区二区精品 | 国产乱理片在线观看夜 | 免费看一级欧美激情毛片 | 手机看片国产免费久久网 | 国产精品毛片va一区二区三区 | 亚洲无线一二三区2021 | 亚洲欧洲日产国码一级毛片 | www.黄色免费网站 | 亚洲成人福利 | 久草精品视频 | 日本三级香港三级乳网址 | 中国国产一国产一级毛片视频 | 亚洲国产精品成人精品软件 | 国产一区二区三区免费在线观看 | 国产一区二区免费播放 | 亚洲国产精品一区二区久 | 国产午夜不卡在线观看视频666 | 香蕉视频国产精品 | 亚洲欧美成人在线 | 久久精品国产福利 | 久久久久久国产精品免费 | 韩国v欧美v亚洲v日本v | 全部免费毛片在线 | 欧美真人视频一级毛片 | 欧美在线视频看看 | 国产精品久久久精品视频 | 高清国产美女一级a毛片录 高清国产亚洲va精品 | 欧美国产成人一区二区三区 | 国产亚洲精彩视频 | 欧美一级毛片免费高清的 |