react-grid-layout浏览器缩放导致显示模糊问题

前言

之前有提过react-grid-layout这个布局库，在使用过程中遇到了赋值报错问题，详情见文章记录react-grid-layout和immer搭配使用导致只读报错 。

时间没过去多久，项目上又遇到了和react-grid-layout相关的问题，具体情况是这样的：

有测试给我反馈，页面上的表格在浏览器缩放过程中会明显模糊，而且这个模糊只存在于react-grid-layout包裹的组件下面，如果表格独立存在，先是还是正常，没有模糊现象。

听到这个问题，我第一反应觉得有点不可思议，于是自己看了下效果，还真是，在浏览器缩放到0.9倍时，表格中间无数据显示的一张图片模糊不清，表头也出现了一样的问题。

说起模糊，之前有遇到没有缩放时的情况，那就是在ios手机上面，由于高清屏，图片尺寸又是一倍屏存在这个现象，可是现在这个显然不是一个问题啊，因为这是在PC电脑上发现的。

于是，手动去看了下表格的样式，想确定下是不是有开发不小心在表格上面添加了什么额外样式导致了这个问题，一顿排查操作下来，没有发现什么异常的样式。

最后还是决定问下同事，一同事看到这个问题后，也觉得很是奇怪，但是他无意间提到了一句话让我晃过神来，他说这个问题也很奇怪，只有在react-grid-layout嵌套的组件才会有问题，还真的是，一开始测试提到了这个大前提，我却完全没有放在心上，这个时候我立马联想到了react-grid-layout的布局定位实现方式，它默认是用transform样式来实现的，想到这里，立马将该属性去除，果然，模糊不清的问题立马没有了。

解决方案

既然已经定位到了问题，下一步就是看怎么替换这个定位方式了，先是去查看了组件的说明文档，里面提到了一个useCSSTransforms属性，该值默认是true，官方文档的备注是这样的：

Uses CSS3 translate() instead of position top/left.

使用translate来代替top/left定位

This makes about 6x faster paint performance

这样的话会带来6倍的性能提升

因为项目上用react-grid-layout定位布局还是属于小众场合，所以牺牲下性能换来使用稳定性还是有必要的，改了这个属性以后，定位由tansform调整为top/left定位，模糊问题完美解决。

扩展

最终我们来分析下为什么会发生这个现象呢？那要从上述提到的transform带来6倍性能提升说起：

transform 会使用 GPU 硬件加速，浏览器通过该样式创建了一个独立图层，使用GPU渲染会影响字体的抗锯齿效果。

这是因为GPU和CPU具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。

由于浏览器将图层拆分到 GPU 以进行 3D 转换，而非整数的像素偏移，使得 Chrome 在字体渲染的时候，不是那么的精确。

具体到显示上面来讲，就是高清屏dpr>1的越不容易觉察到这个模糊问题，而普通屏dpr=1，就很容易出现这个现象。