有没有人遇到CSS Grid奇数像素单元格渲染故障？求修复方案

问题根因 #

该问题是Chromium（Chrome、Edge共用内核）已知的栅格化渲染缺陷，和布局代码逻辑无关：当网格列数、单个单元格宽度同时为奇数时，内核的合成层渲染会错误地在单元格边缘插入半透明的亚像素混合边，即便所有元素尺寸经校验为整数像素也会触发。Firefox栅格渲染逻辑不同，因此不会复现该问题。

修复方案 #

• 方案1（零侵入优先选）：给网格容器添加CSS属性 transform: translateZ(0)，强制为网格创建独立合成渲染层，绕开内核默认的跨元素亚像素混合逻辑，对绝大多数场景有效，且完全不影响现有布局计算、交互逻辑。
• 方案2（无额外合成层开销）：给所有单元格添加CSS属性 outline: 1px solid [你的单元格背景色]，outline默认不占用布局空间，刚好可以覆盖渲染生成的异常线条，适合性能敏感、不希望随意开启合成层的场景。
• 方案3（从触发条件规避）：修改现有resize尺寸计算逻辑，判断当「列数为奇数且计算出的单元格宽度为奇数」时，将网格总宽度向上偏移1px，此时单元格宽度变为偶数，直接绕开bug触发条件，适合不需要严格贴合父容器最短边的场景。

注意：不要使用负margin遮盖间隙，会导致单元格内容重叠，影响拼图、游戏类场景的交互判定。

内容的提问来源于stack exchange，提问作者theDickChuck