使用 Vue Material 的 Dialog 做了一個(gè)彈出框，彈出框內(nèi)動(dòng)態(tài)綁定了幾個(gè)數(shù)據(jù)，頁(yè)面效果一出來

What the fuck? 馬賽克？

Vue Material 的組件肯定沒問題，應(yīng)該自己代碼哪問題，先把官網(wǎng)提供的例子在項(xiàng)目中運(yùn)行了一下，效果正常。然后加上項(xiàng)目效果代碼，顯示一個(gè)動(dòng)態(tài)數(shù)據(jù)，字體之類的都變模糊了，看來動(dòng)態(tài)綁定的數(shù)據(jù)會(huì)導(dǎo)致 Dialog 里面的內(nèi)容變模糊，顯示靜態(tài)內(nèi)容沒問題。

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

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

}

發(fā)現(xiàn) transform: translate(-50%,-50%); 這行居中css代碼會(huì)導(dǎo)致字體模糊，直接去掉居中效果沒了，繼續(xù)往下看

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

總結(jié)

使用 transform 后出現(xiàn)效果模糊的情況，先查看 width height 屬性是否為偶數(shù)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。