Chrome 121中scrollbar-width CSS属性是否存在兼容性Bug？

原通用滚动条隐藏样式 #

以下是原本用于隐藏滚动条同时保留滚动功能的CSS样式：

body::-webkit-scrollbar { /* Chrome and Edge (Webkit or Blink) */
    display: none;
}
body {       
    -ms-overflow-style: none; /* IE and legacy Edge */
    scrollbar-width: none; /* Firefox */
}

该样式曾在Chrome旧版本中正常生效，但在Chrome 121版本中失效。经测试：

• 注释掉scrollbar-width: none后，滚动条可再次被隐藏
• Chrome 121中单独使用scrollbar-width: none也无法隐藏滚动条
• 原样式中scrollbar-width属性与::-webkit-scrollbar { display: none; }规则产生冲突

临时解决方案 #

通过针对Firefox单独包裹scrollbar-width属性，避免影响Chrome的规则：

body::-webkit-scrollbar { /* Chrome and Edge (Webkit or Blink) */
    display: none;
}
body {       
    -ms-overflow-style: none; /* IE and legacy Edge */
}
@-moz-document url-prefix() { /* 仅对Firefox生效 */
    body {       
        scrollbar-width: none; /* Firefox */
    }
}

问题结论 #

这属于Chrome 121的兼容性Bug。原因在于：

1. 此前Chrome未实现scrollbar-width属性，同时书写两种规则无冲突
2. Chrome 121版本中该属性不仅自身无法实现隐藏滚动条的预期效果，还干扰了原本正常的WebKit滚动条伪元素规则，违背了CSS属性的兼容逻辑

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