国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-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
相關文章:
主站蜘蛛池模板: 特黄特色大片免费播放路01 | 老头巨大粗长xxxxx | 深夜国产成人福利在线观看女同 | 成人免费观看一区二区 | 亚洲日韩中文字幕 | 国产亚洲欧美日韩在线观看一区二区 | 国产在亚洲线视频观看 | 韩国一级淫片视频免费播放 | 欧美一级视频在线观看欧美 | 99在线视频精品费观看视 | 国产精品一国产精品免费 | 免费观看欧美一级高清 | 视频网18免费 | 日韩乱码视频 | 在线视频观看国产 | 欧美f| a级国产精品片在线观看 | 成人久久视频 | 在线观看亚洲免费 | 成人国产精品久久久免费 | 国产成人丝袜网站在线看 | 欧美国产成人在线 | 一本色道久久99一综合 | 日韩国产免费一区二区三区 | 狠狠综合久久久久综合小说网 | 欧美俄罗斯一级毛片激情 | 亚洲视频日韩 | 日韩欧美一区二区三区久久 | 国产91精品一区二区视色 | 久久一区二区三区99 | 亚洲欧美在线看 | 欧美日韩一区二区三区视频播 | www.久草视频 | 精品久久久久亚洲 | 欧美日韩免费一区二区在线观看 | 美女很黄很黄是免费的·无遮挡网站 | 久久99热精品免费观看k影院 | 伊人久久大香线焦综合四虎 | 国产三级在线观看视频 | 国产成人精品午夜在线播放 | 91成人精品 |