css - 在 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 Docs 说:

The transparent keyword represents a fully transparent color. Thismakes the background completely visible. Technically, transparent is ashortcut for rgba(0,0,0,0).

关键字代表 颜色 ，虽然是全透明的，但还是有颜色的。