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

Question

有一个块，其中文本更接近结尾逐渐消失。这是使用::after 完成的，从透明色到背景色的linear-gradient。 最近注意到，在当前版本的浏览器中，一切都很好，除了 safari（在 11 版中，太糟糕了）。自动前缀不是解决方案（他在这里，不需要）。

我的代码：

* {
  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 Docs 说：

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

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