Chrome v90使用百分比的linear-gradient线性渐变不显示问题

问题原因 #

Chrome v90（90.0.4430.212）存在一个专属的linear-gradient语法解析bug：当渐变规则里出现连续多个相同色值且相同位置的色标时，渲染引擎会错误将整段渐变判定为无效规则，直接忽略对应的background属性声明。你提供的代码里连续出现了三个rgba(0,0,0,0.4)色值，其中两个色标位置都是50%，刚好触发了该版本的解析缺陷，其他浏览器和Chrome更高/更低版本都没有这个问题。

修复方案 #

两种方案都可以在不改变预期渐变效果的前提下绕开bug：

• 微调重复色标的位置数值，把第二个50%改为50.01%，视觉上不会有任何差异，修改后代码如下：

background: linear-gradient(45deg, #333, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 50.01%, rgba(0,0,0,0.4));

• 合并重复的色值声明，你当前写法里后两段色值完全重复，没有必要分开写，直接合并即可，修改后代码如下：

background: linear-gradient(45deg, #333, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4));

该bug仅存在于Chrome v90版本，v91及之后的Chrome版本已经修复了这个问题，你写的原始语法确实符合W3C规范，不需要对兼容更高版本的代码做额外调整。

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