transform导致字体模糊
我在给一个定位元素垂直居中的时候习惯性的设置了
.element {
position: absolute;
top: 50%;
transfome: translateY(-50%);
}
设置完成后没有发现问题，后来无论时美工还是测试都反应这个元素字体模糊。
我还是第一次遇见这个问题。后来经过反复排除认定了是 transform 的锅。
经过查资料之后发现因为是定位元素的高度为奇数，自身的50%就是一个小数。而
transform在渲染非整数的 px 时就会出现字体模糊。甚至时上下反复移动（抖动）。解决办法：
- 给定位元素偶数高度(基本没用，很多情况我们无法写死高度)。
- 【transform导致字体模糊】不用动画用
margin,不过margin的百分比是相对于父级的。我们还是要知道元素的准确高度。
.element {
position: absolute;
top: 50%;
margin-top: ...;
}
- 给定位元素一个父级。使用
height:100%然后设置flex布局的垂直居中
.father {
display:flex;
align-items:center
}
推荐阅读
- 唱歌教学（导致嗓音损坏的几个常见的错误唱歌方法！）
- 经常洗头真的会导致脱发吗（）
- iOS富文本为html时，修改默认字体颜色
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- SpringBoot解决Shiro导致依赖注入的bean事务失效问题
- 增强现实涂鸦将导致广告埋伏战争
- iOS输入框字体大小自适应时placehodler字体也被调整了大小
- 父母的哪些举动导致了孩子的不良行为呢（看看就明白了|父母的哪些举动导致了孩子的不良行为呢？看看就明白了 ?！）
- 导致艺考生落榜的真凶是谁（）
- transformer|Swin-Transformer代码讲解-Video Swin-Transformer