css - 视网膜 Safari 中带有渐变的奇怪水平线

Question

我的渐变 div 上有一条奇怪的水平线。它只在 Safari 和视网膜显示器上显示，我不明白为什么。还有其他人遇到过这个问题吗？

HTML:

<div class="img-gradient2"></div>

CSS:

.img-gradient2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 26%, rgba(0,0,0,0.01) 27%, rgba(0,0,0,0.5) 68%, rgba(0,0,0,0.6) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Chrome,Safari4+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 ); /* IE6-9 */
}

Answer 1

我遇到了同样的错误。它似乎是由视网膜显示器上的 Webkit 中的渐变背景触发的。我已经在 MBP 和 iPad 上复制了它。

经过一些测试，我找到了解决方法。由于 Webkit 渲染引擎似乎是沿着渐变的边缘绘制一个非透明背景的一个像素线，您可以简单地告诉它通过调整 background-position-y 将背景向上定位一个像素。 (对于阅读这篇文章的其他人来说，如果你做的是左右渐变而不是从上到下，那么将其更改为 background-position-x。)

但是，这会在渐变的另一侧将底层内容暴露一个像素，因此您可以将渐变叠加的绝对位置改变一个。

background-position-y: -1px;
bottom: -1px;

根据您的设置，更改底部(或顶部)可能不会产生所需的结果，具体取决于渐变与底层内容的交互方式。不过，background-position-y 技巧将删除可能更好的黑线。

完整代码

.img-gradient2 {
    position: absolute;
    width: 100%;
    height: 100%;
    /** Workaround fix for Webkit black-line on retina displays **/
    background-position-y: -1px;
    bottom: -1px;
    /**/
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 26%, rgba(0,0,0,0.01) 27%, rgba(0,0,0,0.5) 68%, rgba(0,0,0,0.6) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Chrome,Safari4+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 ); /* IE6-9 */
}