Safari 14+浏览器按钮禁用转启用时CSS color规则未生效问题咨询

这是Safari 14及以上版本WebKit内核的已知兼容性bug。

问题原因 #

该bug由WebKit内核的渲染层缓存逻辑异常导致：当按钮的disabled属性切换时，内核没有正确识别到文本颜色样式的更新，即便开发者工具的computed面板显示颜色计算值正确，渲染层仍会沿用禁用状态下的文本颜色缓存，不会主动触发重绘。

可行解决方案 #

• 强制触发元素重绘：在切换按钮disabled属性的代码执行后，添加一行读取元素布局属性的代码即可触发重绘，例如buttonElement.offsetHeight；也可以给按钮提前添加CSS规则will-change: color，告知浏览器该属性会发生变动，提前规避缓存问题。
• 调整样式匹配规则：不要仅依赖button:disabled原生选择器定义禁用状态的文本颜色，额外新增自定义状态类（比如.button--disabled），切换disabled属性的同时同步切换该类，且保证自定义类的样式优先级高于原生选择器，即可绕过该渲染bug。
• Material UI场景适配：给Button组件绑定一个动态的自定义CSS变量，每次按钮状态切换时更新该变量的取值（例如赋值为当前时间戳），强制浏览器重新计算元素样式，触发重绘。

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