Safari 线性渐变答案

【问题标题】：Safari linear gradientSafari 线性渐变
【发布时间】：2022-01-20 23:31:51
【问题描述】：

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

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

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

代码：

<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>

* {
  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);
}

如果你在 Safari 中打开它，在块的右侧会有一个类似白色的区域。

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

【问题讨论】：

标签： safari gradient linear-gradients

【解决方案1】：

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

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

See this stack for more

* {
  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>

【讨论】：