Safari 线性渐变

Question

我在 Safari 15.2 中使用线性渐变时遇到问题。

如果孩子不适合，我想在最后创建一个具有淡入淡出效果的块。

我创建了一个示例：https://codepen.io/serejich/pen/xxXLvEG。

代码：

* {
  margin: 0;
}

.gradient-container {
  background-color: coral;
  width: 200px;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
}

.elements {
  padding: 0 10px;
  display: flex;
  column-gap: 10px;
  overflow-x: hidden;
}

.elements p {
  color: #fff;
  white-space: nowrap;
}

.gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) calc(100% - 50px), coral);
}

<div class="gradient-container">
  <div class="elements">
    <p>Element 1</p>
    <p>Element 2</p>
    <p>Element 3</p>
  </div>
  <div class="gradient"></div>
</div>

如果你在 Safari 中打开它，块的右侧会出现类似白色区域的东西。

这是什么原因造成的，有什么办法可以解决吗？

Answer 1

这是 safari 中的一个错误，与浏览器在渐变之间插值的方式有关。

一个常见的答案是使用 rgba(255, 255, 255, 0) 执行您所做的操作，但是，Safari 仍然将其解释为白色，并导致在渐变中添加不必要的白色。解决方法是使用与要转换的颜色相同的颜色（在本例中为珊瑚色）并将其设置为透明，对于珊瑚色，该颜色为 rgba(255, 127, 80, 0)。下面的示例使用笔中的代码并针对 safari 应用了修复。

请参阅此堆栈了解更多

* {
  margin: 0;
}

.gradient-container {
  background-color: coral;
  width: 200px;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
}

.elements {
  padding: 0 10px;
  display: flex;
  column-gap: 10px;
  overflow-x: hidden;
}

.elements p {
  color: #fff;
  white-space: nowrap;
}

.gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*RGBA equivalent to coral html color with alpha set to 0 - fixes safari interpolation bug*/
  background: linear-gradient(to right, rgba(255, 127, 80, 0) calc(100% - 50px), coral);
}

<div class="gradient-container">   
  <div class="elements">
    <p>Element 1</p>
    <p>Element 2</p>
    <p>Element 3</p>
  </div>
  <div class="gradient"></div>
</div>