css的transparent属性在safari浏览器里的特殊表现形式

知识背景

众所周知，css的transparent属性表示透明，可以用于color，background, linear-gradient等属性。

问题现象

如下，简单的设置一个div有这样的css属性

 <div className='test'>
      <div className='inner'></div>
 </div>

div.test {
  background-color: red;
  width: 100px;
  height: 100px;
  position: relative;
  .inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 100px;
    background-image: linear-gradient(
      to bottom,
      transparent,
      rgba(255, 255, 255, 0.5),
      transparent,
    );
  }
}

在Chrome里的效果是这样的

这也很好理解，就是一个红色色块有一层从上到下的透明渐变。
但是如果在safari里打开是这样的效果：

上下多了一层灰色的渐变

问题原因

我们先看看linear-gradient的兼容性

原来是因为在部分safari浏览器，在渐变里面使用transparent会有意外的展示行为。
具体是一般来说transparent却等价于等价于rgba(255,255,255,0),是透明度为0的白色；
但是部分safari浏览器里的transparent却看起来是等价于rgba(0,0,0,0)，是透明度为0的黑色。（我的理解，这里说的not using premultiplied colors，指的就是rgba(0,0,0,0)）
所以，从透明的黑色渐变到半透明的白色，就会产生灰色。

解决方法

不要使用transparent，所有的transparent都可以使用rgba(255,255,255,0)来代替。
当然这只是渐变的时候才会有问题。单一颜色的时候，不管是任何颜色，只要alpha透明通道为0，就是透明了，这个时候用transparent当然是没问题的。