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

Question

我已将渐变颜色更改为红色以使问题更加明显。渐变上的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>

Answer 1

将填充更改为仅2位小数就可以解决这个问题。

Answer 2

我遇到类似@Fastmover的问题。

我认为它与Safari做天花板和地板的错误有关，当计算基于宽度的百分比时，不知何故结束颜色出现在开头（我相信它真的没有意义!!）。

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

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

所以即使它可能出现在另一端，它也会混合＃34;很好的背景，没有人会注意到......