使用 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;
试试,问题解决了。
<md-dialog style="width: 280px;"> <md-dialog-title></md-dialog-title> <md-dialog-content></md-dialog-content> </md-dialog>
总结
使用 transform
后出现效果模糊的情况,先查看 width
height
属性是否为偶数