谷歌Chrome调整窗口大小时按钮border-right边框消失问题求助

问题描述 #

调整Chrome浏览器窗口大小时，按钮的右侧边框会随机消失，目前尚未提炼出可稳定复现的最小示例。
已尝试公开的Chrome 1px边框渲染异常相关修复方案，均未生效。

复现效果 #

运行环境 #

• Chrome 92.0.4515.159

可行解决方案 #

这是Chrome亚像素计算和渲染队列调度导致的经典边框渲染异常，你可以尝试以下方案：

• 给目标按钮添加CSS属性transform: translateZ(0)，强制开启GPU加速渲染该元素，避免CPU渲染队列的漏绘问题
• 将按钮的border宽度从1px调整为1.01px，规避Chrome的亚像素整数舍入误差导致的边框宽度计算为0的问题
• 改用内投影替代border实现右侧边框：box-shadow: inset -1px 0 0 #你的边框色，该属性的渲染逻辑独立于border，不会触发该bug
• 若以上方案无效，可以监听window的resize事件，事件触发时给按钮添加临时重绘逻辑：先设置display: none，10ms后改回原有值，强制Chrome重绘该元素

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