为什么Safari和Firefox似乎错误地渲染我的渐变,我该如何修复它？

Question

这是CodePen上的代码.它看起来与我在Chrome中的预期完全一样.Firefox和Safari都看错了.(我是所有3的最新版本.)

我正在研究一种跨多个inline-block元素使用恒定渐变背景的方法.以下是它现在的工作方式:

1. 我有一个父元素,ol其:before伪元素具有渐变背景(transparent到不透明的颜色)和一个z-index在子元素上方显示它的集合li.
2. 该li■找的background-color设置为颜色看起来像什么梯度的transparent值设置为.
3. 所述li的color被设置为transparent和具有:before该显示对以前设置为文本伪元素transparent并且它们的z折射率设置为显示上述ol:before(背景梯度).

我在Firefox中遇到的问题:

1. 渐变看起来有3个颜色停止(透明,灰色,透明)而不是设置的2.
2. 渐变似乎有一个多重混合模式设置.

我在Safari中看到的问题:

除了Firefox中的相同问题,它还显示两个似乎具有多重混合模式的渐变.一个来自-webkit-linear-gradient一个linear-gradient.但是,解决明显混合模式的问题应该考虑到第三个问题.

---

我的谷歌搜索让我意识到background-blend-mode,但设置为normal(或任何其他有效值)没有改变任何东西.我认为它只适用于单个元素的多个背景,但我不确定.但是,这可以解释为什么它不能解决我的问题.

Answer 1

问题是我使用的是关键字,transparent而不是它渐变的颜色的透明版本.未按预期呈现渐变的浏览器将transparent视为透明黑色.这意味着渐变中存在黑色和我的颜色之间的不同渐变.

我正在使用SASS,因此修复非常简单:只需使用该rgba()函数将我的十六进制颜色转换为rgba.

background-image: linear-gradient(to top right, rgba($brand-primary, 0), $brand-primary);

我更新了CodePen上的代码以显示解决方案.