Safari 背景渐变 - 渐变的右侧在左侧显示 1px答案

【问题标题】：Safari Background Gradient - Right side of gradient showing up 1px on left sideSafari 背景渐变 - 渐变的右侧在左侧显示 1px
【发布时间】：2015-05-05 18:18:43
【问题描述】：

我已将淡入淡出更改为红色，以使问题更加明显。渐变上的 100% 颜色在此 div 的左侧渗入 1 个像素。这似乎是一个 Safari 错误，但我想知道是否有人对此有修复？

应用于此的样式如下：

background: linear-gradient(to right, #007AC3 0%,#d30421 100%);
padding: 0 4.29929%;
width: auto !important;
background: #1575C5;
float: left;
display: block;
text-transform: uppercase;
text-align: center;
color: #ffffff;
letter-spacing: 0.04em;
-webkit-backface-visibility:hidden;
text-decoration: none;
line-height: inherit;
box-sizing: border-box;
font-weight: normal;
font-style: normal;
cursor: auto;

DOM：

<a class="menu-item" href="/About" target="_top">
    <div>
      <p>About</p>
    </div>
</a>

【问题讨论】：

您可以尝试添加：repeat-y; 到背景或重置背景剪辑
其实我都试过了，都没有帮助。这很明显是 Safari 唯一的错误，因为没有其他浏览器会这样做。修复实际上是将填充中的小数缩小到 4.29%

标签： css safari background-color

【解决方案1】：

将填充更改为仅 2 位小数可解决此问题。

【讨论】：

【解决方案2】：

我遇到了与@Fastmover 类似的问题。

我相信这与 Safari 在计算基于百分比的宽度时做天花板和地板的错误有关，并且以某种方式出现在开头的结尾颜色（我认为这真的没有意义！！）。

在我的情况下，我没有填充，所以我通过将开始颜色和结束颜色设置为与背景颜色相同来解决问题。所以它看起来像（假设背景颜色是白色）：

background: linear-gradient(to right, white 0% #007AC3 1%,#d30421 99%, white 100%);

因此，即使它可能出现在另一端，它也与背景“融合”得很好，没有人会注意到...

【讨论】：