CSS3 transform 字体模糊问题

使用 Vue MaterialDialog 做了一个弹出框,弹出框内动态绑定了几个数据,页面效果一出来

What the fuck? 马赛克?

Vue Material 的组件肯定没问题,应该自己代码哪问题,先把官网提供的例子在项目中运行了一下,效果正常。然后加上项目效果代码,显示一个动态数据,字体之类的都变模糊了,看来动态绑定的数据会导致 Dialog 里面的内容变模糊,显示静态内容没问题。

样式问题对于职业前端选手来说不都是分分钟搞定的事情吗?

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

css 复制代码
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; 试试,问题解决了。

xml 复制代码
<md-dialog  style="width: 280px;">
  <md-dialog-title></md-dialog-title>
  <md-dialog-content></md-dialog-content>
</md-dialog>

总结

使用 transform 后出现效果模糊的情况,先查看 width height 属性是否为偶数

相关推荐
滿3 分钟前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
夏梦春蝉1 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室2 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子3 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W5 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程6 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏6 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083167 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html