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

但是，这会将基础内容暴露在与渐变相反的一侧的一个像素上，因此您可以将渐变叠加的绝对位置更改为1。

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 */
}

奇怪的水平线与视网膜Safari中的渐变

1 个答案: