使用 Vue Material 的 Dialog 做了一個彈出框，彈出框內動態綁定了幾個數據，頁面效果一出來

What the fuck? 馬賽克？

Vue Material 的組件肯定沒問題，應該自己代碼哪問題，先把官網提供的例子在項目中運行了一下，效果正常。然后加上項目效果代碼，顯示一個動態數據，字體之類的都變模糊了，看來動態綁定的數據會導致 Dialog 里面的內容變模糊，顯示靜態內容沒問題。

樣式問題對于職業前端選手來說不都是分分鐘搞定的事情嗎？

在 Chrome-devtools 里查看一下 Dialog 元素的樣式

md-dialog {

box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);

min-width: 280px;

max-width: 80%;

max-height: 80%;

margin: auto;

display: flex;

flex-flow: column;

flex-direction: row;

overflow: hidden;

position: fixed;

top: 50%;

left: 50%;

z-index: 11;

border-radius: 2px;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

pointer-events: auto;

transform: translate(-50%,-50%);

transform-origin: center center;

transition: opacity .15s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1);

will-change: opacity,transform,left,top;

}

發現 transform: translate(-50%,-50%); 這行居中css代碼會導致字體模糊，直接去掉居中效果沒了，繼續往下看

布局圖里面顯示出現了小數，Dialog顯示清晰的效果里面都是整數值，查看 width 屬性設置，只有百分比形式，百分之五十可能 width 屬性為奇數導致出現小數，添加一行 width: 280px; 試試，問題解決了。

總結

使用 transform 后出現效果模糊的情況，先查看 width height 屬性是否為偶數

總結

以上是生活随笔為你收集整理的css3 transform文字,CSS3 transform 字体模糊问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。