由CSS3 transform 字体模糊问题揭示出浏览器渲染机制

Posted 2021-04-09 面包理想

为了实现垂直、水平居中效果，经常会用到  

 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);

但是在实际项目中，会遇到居中弹出层的字体模糊问题。

先看两个对比图

两个div的居中写法一模一样，不同的地方就是第一个div 的宽高为奇数，第二个div的宽高为偶数。

为什么会出现第一个div的边框和文字都有些模糊的情况呢？

原因是在Chrome浏览器中使用translate进行位移的时候，如果选择的值是小数，位移的元素字体、边框、背景等都会出现模糊的情况。

举个例子：当宽高为201px的div，使用 transform: translate(-50%,-50%) 相当于div向左、上方各移动了100.5px，出现了小数点。

Chrome 面对位移了100.5px这个问题，采取了相对简单粗暴的方式，就是会渲染成100px、101px、100px、101px、100px ....

100px 和 101px 交替渲染，便出现了模糊。

但是Firefox浏览器和IE渲染的又没有问题，效果如下

两个div都没有出现模糊的现象。

这是浏览器对于含小数值px（像素）解析的差异渲染机制不同造成的。

当元素进入GPU中渲染时，在Chrome35+中为grayscale渲染，IE11和FF30保持sub-pixel渲染不变。

因此在Chrome浏览器中，若transform值函数，如translate3d(), scale(), rotate()等，其中的参数为非整数，会导致模糊问题。

·END·

面包理想

让涨工资变得简单