浏览器缩放时容器间出现CSS渲染间隙（Firefox正常）问题咨询

问题表现 #

• 基于Material UI开发的卡片组件，点击时通过动画切换background-color属性，动画本身运行无异常
• 在Chrome、Edge等Chromium内核浏览器中对页面执行缩放操作时，部分缩放比例下卡片容器之间会渲染出1px左右的空白间隙
• 间隙出现位置完全随机：仅部分卡片会触发该问题，其余卡片渲染完全正常

异常渲染效果可参考对应问题截图

已做排查与测试 #

• 已检索大量同类问题案例，覆盖Chrome缩放像素舍入问题、IE11定位元素间细线bug、缩放场景下图片瓦片间隙等相关公开问题，所有可查的通用修复方案均未生效；现有公开观点多认为这类问题属于浏览器底层渲染逻辑导致，无通用彻底修复方案
• 已搭建最小可复现Demo，多场景测试结论如下：
  • 无论容器使用原生div还是Material UI官方Card组件，问题均存在
  • 显式设置border-radius: 0px无法解决问题
  • 将border-bottom设置为偶像素值，仅能在50%等少数缩放比例下缓解问题，无法覆盖全量缩放场景
• 对照测试：Firefox浏览器下全缩放比例均无该异常，渲染效果符合预期

Firefox下正常渲染效果可参考对应正常效果截图

诉求 #

该问题已排查多日，求可落地的解决思路或修复方案。

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