transform导致字体模糊的bug

weakish 发布于2019-08-30 14:10 / 3083人阅读

摘要：我在给一个定位元素垂直居中的时候惯性的设置了设置完成后没有发现问题，后来无论时美工还是测试都反应这个元素字体模糊。后来经过反复排除认定了时的锅。经过查资料时应为要移动的元素的高度时奇数的。动画在渲染非整数的时就会出现字体模糊。

我在给一个定位元素垂直居中的时候惯性的设置了

.element {
  position: absolute;
  top: 50%;
  transfome: translateY(-50%);
}

设置完成后没有发现问题，后来无论时美工还是测试都反应这个元素字体模糊。

我还是第一次遇见这个问题。后来经过反复排除认定了时 transform 的锅。

经过查资料时应为要移动的元素的高度时奇数的。css 动画在渲染非整数的 px 时就会出现字体模糊。甚至时上下反复移动。

解决办法：

给定居中元素偶数高度(基本没用，很多情况我们无法写死高度)。

不用动画用margin,不过margin的百分比是相对于父级的。我们还是要知道元素的准确高度。

.element {
  position: absolute;
  top: 50%;
  margin-top: ...;
}

给与定位元素一个父级。使用height:100% 然后设置flex布局的垂直居中

.father {
  display:flex;
  align-items:center
}

云服务器 GPU云服务器字体模糊系统字体模糊模糊引擎字体导致证书错误的原因

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115821.html

[总结]CSS/CSS3常用样式与web移动端资源

摘要：不允许负值用百分比来定义缩放比例。解决这个很简单，在父元素中使用即可解决该。列宽度由单元格内容设定。定义仅有大写字母。不过，要让任何元素生效还得借助于一点点。 css/css3常用样式 CSS修改选中文字的颜色 html代码：第一段文字选中效果第二段文字选中效果 css代码： .p1::selection{background:red;color:#fff;} .p2::selec...

The question 2019-08-28 17:54 评论0 收藏0
第六天移动端Web开发注意事项

摘要：随着移动互联网的发展，移动已经逐渐成为互联网的主要入口，随之而来的是前端在移动开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结，必然不可能涉及方方面面，但会随着笔者的积累持续更新。随着移动互联网的发展，移动Web已经逐渐成为互联网的主要入口，随之而来的是前端在移动Web开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动Web开发需要注意...

妤锋シ 2019-08-30 13:09 评论0 收藏0
第六天移动端Web开发注意事项

摘要：随着移动互联网的发展，移动已经逐渐成为互联网的主要入口，随之而来的是前端在移动开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结，必然不可能涉及方方面面，但会随着笔者的积累持续更新。随着移动互联网的发展，移动Web已经逐渐成为互联网的主要入口，随之而来的是前端在移动Web开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动Web开发需要注意...

xbynet 2019-08-01 15:58 评论0 收藏0
移动端web app自适应布局探索与总结

摘要：方案的简单介绍基于前提页面元素的布局尺寸全都以设计稿为基准等比例设置。给根节点设置一个基础值，然后页面的所有元素布局均相对于该值采用单位设定。 1、困扰多时的问题在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的...

Benedict Evans 2019-08-21 10:44 评论0 收藏0