Safari 中透明颜色会发生什么？

Question

有一个块，其中接近末尾的文本逐渐消失。这是使用

::after

来完成的，它从透明颜色到背景颜色给出

linear-gradient

。 最近注意到，在当前版本的浏览器中，除了 safari 之外，一切都很好（在第 11 版中，情况太糟糕了）。 Autoprefix 不是解决方案（他在这里并且不需要）。

我的代码：

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  min-height: 100vh;
}

p {
  margin: auto;
  width: 40vw;
  height: 40vh;
  max-width: 300px;
  max-height: 300px;
  overflow: hidden;
  position: relative;
}

p::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  background-image: linear-gradient(transparent 0, white 100%);
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel urna efficitur, tempor felis eu, lacinia sem. Nulla lacinia tincidunt turpis, faucibus luctus leo. Mauris lobortis orci lacus, vel luctus leo venenatis ac. Phasellus feugiat urna sit
  amet nisi dapibus, a dignissim nibh dignissim. Suspendisse vel tempor nisl. Pellentesque hendrerit, nibh non vehicula finibus, turpis tellus auctor purus, ac placerat magna elit vel mauris. Nullam viverra venenatis enim. Vivamus odio lectus, maximus
  quis dolor et, lobortis ullamcorper velit. Nulla fringilla ligula a metus faucibus commodo non ac lectus. Aenean bibendum arcu eu nibh convallis ornare.</p>

决定将

transparent

替换为

rgba(255,255,255,0)

。但这是不正常的行为，在我看来是一个拐杖。

有什么想法吗？

Answer 1

我不知道使用

RGBA(255, 255, 255, 0)

有什么缺点，如果这对您有用，我认为您应该使用它。这是更好的方法，因为它不像

transparent

关键字那样依赖浏览器来确定不透明度为 0 的颜色。

您遇到的问题是由于最新版本的 Safari 认为

transparent

表示的颜色是

gray

而其他大型浏览器认为它与元素的背景颜色相同，这在你的情况下是

white

。

为了防止意外行为（例如渐变），当前的 W3C 规范规定应在 alpha-premultiplied 颜色空间中计算透明。但是，请注意，一些较旧的浏览器可能会将其视为 alpha 值为 0 的黑色，显然最新版本的 Safari 也做了类似的事情。

回答OP的评论：

不存在无色透明之类的东西，带有渐变的示例完美地展示了这一点。

例如，Mozilla 的 MDN Web 文档说：

transparent关键字代表完全透明的颜色。这 使背景完全可见。从技术上讲，透明是 rgba(0,0,0,0) 的快捷方式。

该关键字代表一种颜色，虽然是全透明的，但仍然是一种颜色。