捉到 Edge 的渲染 BUG 一只

最近测试同学发现,用 Edge 浏览器,访问问卷的新版设置界面,部分联动锁总是显示异常,该锁的没锁,不该锁的又锁上了。

期初以为是 React 在 Edge 里面有什么 bug,一圈排查下来,发现状态、样式都是正确的,偏偏就是显示出来的很诡异,鼠标在上面晃动一下又正常了(浏览器绘制BUG,以前 IE7 也遇到过)。

这个 BUG 的特征,当使用 :disabled ~ label 这种伪类 + 相邻元素进行样式定义的时候,如果动态修改 input.disabled 的值,其对应的 label 的表现就不会更新。

Demo

这个 Edge 的 BUG,会让 checkbox 美化的最佳实践受到影响

解决方案

修复起来也简单,除了用 :disabled 选择器外,再补一个 .disabled 的选择器进行兜底。

这年头各种状态驱动界面,class 用起来都不是个事。

测试版本号

  • Microsoft Edge 42.17134.1.0