共计 809 个字符,预计需要花费 3 分钟才能阅读完成。
在写一个 toast 组件的时候,组件上的文字会变得含糊,发现是因为 toast 应用了transform: translate(-50%, -50%);
↑原来的样子
↑应用 translate 之后的样子
在复现过程中发现 FireFox 并不会呈现含糊的问题,而 Chrome 和新版 Edge 会有,并且是在有滚动条时才会含糊
↑无论是横向还是纵向的滚动条的呈现都会有影响
网上大多数解释都是:应用了 transform 的元素的宽度或高度为奇数造成的(底层起因暂未找到,有晓得的大佬请评论告知),这里提供几种解决方案
-
已确定元素的宽高时
- 应用负
margin
代替translate
- 应用负
-
不确定元素宽高时
- 利用 js 计算元素的负
margin
以代替translate
- 应用
flex
代替translate
- 应用下方代码防止应用
translate
<style> .box{ position: fixed; top: 50%; left: 0; width: 100%; height: 0;/* 避免.box 阻挡未定位元素的鼠标事件 */ text-align: center;/* 躲避因宽度为奇数造成含糊 */ } .message{ display: inline-block; transform: translateY(-50%); line-height: 20px;/* 文本能够通过此属性管制高度的数值为偶数 */ /* 其余丑化款式 */ padding: 10px 12px; background-color: rgba(37, 44, 65, 0.8); color: #f4f5f9; } </style> <div class="box"> <span class="message"> 你好啊 s </span> </div>
- 利用 js 计算元素的负
尽管这里的 .message
也应用了 translate
,然而绝对于宽度来说,高度的数值是更容易掌控的:文本就设置偶数的line-height
,图片就设置偶数的height
,边距就设置偶数的padding
或margin
等等。
正文完