侧滑弹窗字体模糊问题

目录

• 问题表现：
• 如何复现：
• 问题原因：
• 解决方案：

问题表现：

如何复现：

当.outside高度大于.outside内部元素，并且 transform:translate 计算后的值为非整数：如：matrix(1, 0, 0, 1, 0, -256.5)

弹窗中的文字和边框会出现明显的模糊。

问题原因：

合成图层定位在小数偏移处，则文本看起来会模糊

chromium bug report

segmentfault 类似问题讨论

解决方案：

1. 宽高设置为偶数， 确保translate计算后的值为整数
2. static-frame组件不再使用transform:translate，改为top:15vh替换居中效果。不过会导致组件不再垂直居中。
3. 计算渲染后的translate值。手动增加1px高度在.outside上。但是非固定宽高需要处理窗口的resize事件。