Safari 线性渐变
Safari linear gradient
我在 Safari 15.2 中使用 linear-gradient 时遇到问题。
如果 children 不适合,我想在最后创建一个带有淡入淡出效果的块。
我创建了一个示例: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 中的一个错误,与浏览器在渐变之间进行插值的方式有关。
一个常见的答案是做你所做的,使用 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>
我在 Safari 15.2 中使用 linear-gradient 时遇到问题。
如果 children 不适合,我想在最后创建一个带有淡入淡出效果的块。
我创建了一个示例: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 中的一个错误,与浏览器在渐变之间进行插值的方式有关。
一个常见的答案是做你所做的,使用 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>