css3 transform文字,CSS3 transform 字体模糊问题

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

47a091078c98

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代码会导致字体模糊,直接去掉居中效果没了,继续往下看

47a091078c98

布局图里面显示出现了小数,Dialog显示清晰的效果里面都是整数值,查看 width 属性设置,只有百分比形式,百分之五十可能 width 属性为奇数导致出现小数,添加一行 width: 280px; 试试,问题解决了。

总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/485439.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二分 poj 3273

题目链接:https://vjudge.net/problem/POJ-3273 把n个连续的数字划分成m个连续的部分,每个部分都有一个部分和(这个部分所有值加起来),现在要使划分里最大的那个部分和最小。 我用的也是二分,用二分枚举最大…

MyBatis的配置

dao层的操作太麻烦 jdbc 连接数据库,释放空间什么的太烦了,为了简化,引入了MyBatis Mabatis可以简化JDBC操作,实现数据的持久化 Mabatis是一个ORM产品 ORM:Object Relational Mapping eg: person对象 p…

费曼:微积分是上帝的语言 | 书摘

莱布尼茨和牛顿,图片来自thegreatcoursesdaily.com来源: 赛先生制版编辑:Morgan撰文:史蒂夫斯托加茨(美国康奈尔大学应用数学系教授)没有微积分,我们就不会拥有手机、计算机和微波炉&#xff0c…

js纯ajax,自动完成JS类(纯JS, Ajax模式)

自动完成JS类(纯JS, Ajax模式)更新时间:2009年03月12日 23:51:15 作者:自动完成JS类,用户体验较好。封装成类,方便使用。本站一、 封装的JS文件//********************************************************//创建日期: 2009-03…

Leetcode--151. 翻转字符串里的单词

给定一个字符串,逐个翻转字符串中的每个单词。 示例 1: 输入: "the sky is blue" 输出: "blue is sky the" 示例 2: 输入: " hello world! " 输出: "world! hello" 解释: 输入字符串可以在前面或…

python opencv3 检测人

git&#xff1a;https://github.com/linyi0604/Computer-Vision 1 # coding:utf-82 3 import cv24 5 6 # 检测i方框 包含o方框7 def is_inside(o, i):8 ox, oy, ow, oh o9 ix, iy, iw, ih i 10 return ox > ix and ox ow < ix iw and oy oh < iy i…

朱松纯:AI从感知走向认知是必然趋势

来源&#xff1a;深度学习技术前沿1月28日&#xff0c;以"小数据、大任务"作为技术范式的强认知人工智能平台企业暗物智能科技&#xff08;以下简称“暗物智能”&#xff09;宣布&#xff0c;已于2020年年中完成5亿元人民币的A轮融资。本轮融资由赛领资本和吉富创投共…

五十个小技巧提高PHP执行效率

在项目开发过程中&#xff0c;经常遇到了一些PHP处理程序性能底下的情况&#xff0c;程序运行在centosnginx环境&#xff0c;虽然这个有很多的原因如&#xff1a;服务器本身配置&#xff0c;运行环境nginx服务&#xff0c;php-fpm配置等等&#xff0c;更多有一点仍然是PHPer没有…

statement的增删改查和动态的增删改查

一 statement的crud&#xff1a; mybatis约定&#xff1a; 输入参数parameterType和输出参数resultType&#xff0c;在形式上都只能有一个 如果输入参数&#xff1a;是简单类型(8个基本类型String)&#xff0c;则可以使用任何占位符&#xff0c;#{xxx} 如果是对象类型&…

科学家「黑进」果蝇大脑跑NLP任务,发现效率比BERT高

来源&#xff1a;机器之心最近一段时间&#xff0c;有关摩尔定律终结的讨论时常出现&#xff0c;深度学习越来越高的算力需求与芯片制造厂商们「挤牙膏」式的换代速度产生了不可调和的矛盾。对此&#xff0c;一些研究者们正在专注于常规架构的效率提升&#xff0c;也有一些研究…

配置信息的优化,类型转换器

1. 优化&#xff1a; 可以将配置信息单独放入db.properties中&#xff0c;然后再动态引入 db.properties:kv <configuration> <properties resource"db.properties"/> 引入之后&#xff0c;使用${key} 2. MyBatis全局参数 在<configuration&g…

Attention Model

参考1: https://blog.csdn.net/malefactor/article/details/50550211 attention部分实现: https://blog.csdn.net/mpk_no1/article/details/72862348转载于:https://www.cnblogs.com/ying-chease/p/9448726.html

卫星互联网行业深度报告:战火早已熊熊燃烧

来源&#xff1a;万联证券1、低轨卫星加速建设&#xff0c;协同 5G 与地面通信互补融合1.1 卫星互联网纳入新基建&#xff0c;未来蓝海无限。卫星互联网是基于卫星通信的互联网&#xff0c;通过一定数量的卫星形成规模组网&#xff0c;从而辐射 全球&#xff0c;构建具备实时信…

Leetcode--416. 分割等和子集

给定一个只包含正整数的非空数组。是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等。 注意: 每个数组中的元素不会超过 100 数组的大小不会超过 200 示例 1: 输入: [1, 5, 11, 5] 输出: true 解释: 数组可以分割成 [1, 5, 5] 和 [11]. 示例 2: …

LUGOU P3907 圈的异或

传送门 解题思路 其实就是找出所有的环判断&#xff0c;因为数据范围很小直接暴力做&#xff0c;注意要判断自环。 代码 #include<iostream> #include<cstdio> #include<cstring> #include<cmath> #include<algorithm>using namespace std; cons…

新基建下的自动驾驶:单车智能和车路协同之争

来源&#xff1a;德勤Deloitte编辑&#xff1a;蒲蒲2020年3月&#xff0c;随着中央政治会议的正式定调&#xff0c;“新基建”&#xff0c;即新型基础设施建设&#xff0c;成为公众新焦点。4月&#xff0c;发改委明确新基建范围。在新基建涉及的细分领域中&#xff0c;5G、物联…

输入参数

输入参数&#xff1a;parameterType #{} ${}区别&#xff1a; 1. 类型为简单类型&#xff08;8个基本类型String&#xff09; #{任意值} ${value},其中的标识符只能是value #{}自动给String类型加上 ${}原样输出 但是适合动态排序&#xff08;动态字段&#xff09; s…

2038: [2009国家集训队]小Z的袜子(hose)

2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 Sec Memory Limit: 259 MBSubmit: 15879 Solved: 7205[Submit][Status][Discuss]Description 作为一个生活散漫的人&#xff0c;小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿。终于有一天&#xff0c;小…

Jeff Dean三执笔:一文看尽2020年谷歌AI重大突破

来源&#xff1a;AI前线作者&#xff1a;Jeff Dean译者&#xff1a;核子可乐策划&#xff1a;钰莹 在二十年前刚刚加入谷歌时&#xff0c;我们关注的问题只有一个——如何面向这么多不同种类的联网计算机提供一整套质量出色且涵盖范围全面的网络信息搜索服务。到如今&#xff0…

输出参数

输出参数为resultType 1.简单类型&#xff08;8个基本类型String&#xff09; 2.输出参数为实体对象类型 3. 输出参数为实体对象类型的集合&#xff1a;虽然输出类型是集合&#xff0c;但是resultType依然写集合的元素类型 4. 输出参数类型为HashMap HashMap本身是一个集合…