-webkit-linear-gradient 导致 Chrome/Safari 中的条带答案

【问题标题】：-webkit-linear-gradient causes banding in Chrome/Safari-webkit-linear-gradient 导致 Chrome/Safari 中的条带
【发布时间】：2011-11-06 05:06:58
【问题描述】：

标题几乎说明了一切。下面第一张图是整个页面高约8000像素时的截图，在最新版Chrome中截取：

虽然这张图片是不同的页面（使用相同的 CSS），大约 800 像素高：

这里是代码：

  body{ 
     background-color: #f3ffff;
     margin:0px;
     background-image: url('/media/flourish.png'),
        -webkit-linear-gradient(
            top, 
           rgba(99, 173, 241, 1) 0px, 
           rgba(0, 255, 255, 0) 250px
        );

     background-image: url('/media/flourish.png'), 
        -moz-linear-gradient(
           top, 
           rgba(99, 173, 241, 1) 0px, 
           rgba(0, 255, 255, 0) 250px
        );


     background-image: url('/media/flourish.png'), 
        -o-linear-gradient(
           top, 
           rgba(99, 173, 241, 1) 0px, 
           rgba(0, 255, 255, 0) 250px
        );
     background-position: center top, center top;
     background-repeat: no-repeat, repeat-x;
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
  }

渐变是指在距页面顶部 250 像素处截断。条带的程度似乎取决于页面的总高度这一事实非常奇怪：在这两者之间（800px 和 8000px）的页面的条带似乎比第一个示例小，但仍然很明显。

有趣的是，我之前使用的是-webkit-gradient('linear'...)，但没有出现同样的问题；我只换成了-webkit-linear-gradient，所以它会符合我的-moz 和-o 渐变。

我没有在 Safari 上尝试过，但上面的代码使它在 Firefox 和 Opera 中工作得非常好（颜色变得混乱，但渐变仍然很平滑）。没关系 IE，我已经放弃了。

以前有人见过吗？

更新：这也发生在我的 Mac 的 Chrome/Safari 上，但是对于完全相同的页面，条带大约是顶部图像中显示的条带大小的 1/3。 OSX Chrome 和 OSX Safari 中的条带是相同的。

1/3 的大小仍然很明显，但并不那么刺耳。如果您想在其他浏览器中亲自查看，实际页面位于http://www.techcreation.sg/page/web/Intro%20to%20XTags/。 CSS 是使用 less.js 在浏览器中编译的“内联”css。

【问题讨论】：

我无法查看该问题，因为您的链接当前无法使用 (KeyError at /page/web/Intro to XTags/)。但是，这似乎是一个 WebKit 错误。 Stack Overflow 可能能够提供一种解决方法，但它无法修复错误。如果您还没有提交错误报告，您应该在此处提交错误报告：bugs.webkit.org
您介意看看下面我的解决方案吗？
最终使用它；谢谢 =)

标签： google-chrome css

【解决方案1】：

在我的例子中是身体的高度。请尝试以下操作：

body {
    width:100vw;
    height:100vh;
    ...
}

【讨论】：

【解决方案2】：

在任何奇怪的情况下尝试使用：

transform: translateZ(10px);

【讨论】：

【解决方案3】：

看起来像一个 webkit 错误。我想出了下面的解决方法，在最新的 Chrome 和 FF 上进行了测试。简而言之，您将在主要内容后面放置一个包含背景的 div。我还添加了一些样式让 IE 更快乐。

鉴于此 HTML：

<html lang="en">
<head>
    <style>
        ...
    </style>
</head>
<body>
    <div class="background">bgdiv</div>
    <div class="content_pane">
        <div class="titlebar">Leave a Comment!</div>
        <div class="comment">Your Comment.</div>
    </div>
</body>
</html>

结合这个样式表：

    body{
        background-color: #f3ffff;
        min-height: 100%;
        margin:0px;
    }
    .background {
        height: 250px;
        left: 0;
        position: absolute;  /* could use fixed if you like. */
        right: 0;
        top: 0;
        z-index: -10;

        background-image:
            -webkit-linear-gradient(top,
                rgba(99, 173, 241, 1) 0px,
                rgba(0, 255, 255, 0) 250px
            );
        background-image:
            -moz-linear-gradient(top,
                rgba(99, 173, 241, 1) 0px,
                rgba(0, 255, 255, 0) 250px
            );
        background-image:
            -o-linear-gradient(top,
                rgba(99, 173, 241, 1) 0px,
                rgba(0, 255, 255, 0) 250px
            );
        background-image:
            -ms-linear-gradient(top,
                rgba(99,173,241,1) 0%,
                rgba(0,255,255,0) 250px
            ); /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63adf1', endColorstr='#0000ffff',GradientType=0 ); /* IE6-9 */
        background-image:
            linear-gradient(top,
                rgba(99,173,241,1) 0%,
                rgba(0,255,255,0) 250px
            ); /* W3C */
        background-position: center top, center top;
        background-repeat: no-repeat, repeat-x;
    }
    .content_pane {
        background: white;
        border: 1px dotted white;
        border: 1px solid grey;
        font-family: arial, sans;
        font-weight: bold;
        margin: 6em auto 5em;
        width: 50%;
    }
    .titlebar {
        background: #3f7cdb;
        color: white;
        font-family: arial, sans;
        padding: .25em 2ex .25em;
    }
    .comment {
        padding: 1em;
    }

无论窗口大小如何，它都应该是这样的：

【讨论】：

我删除了-image 仍然有效，那你为什么要添加它？
我认为它来自我使用的css渐变生成器。懒得换了。看起来它比“背景：”更具体一点。
这里是小提琴：jsfiddle.net/j8y3q5t0 如果有人有兴趣观看演示。
这似乎只有在 div 超过一定高度时才“起作用”。如果将高度设置为50px 而不是250px，您仍然会看到条带。（至少在适用于 Linux 的 Chrome 44 中）我认为当进一步扩展该错误时，它会变得不明显。

【解决方案4】：

您的演示链接不起作用，但我做了一些测试，当您向 body/html 元素添加 100% 的宽度/高度时，它对我使用 Chrome 时效果很好，如下所示：

body, html {
    width:100%;
    height:100%;
}

Demo

您可以尝试这样做，或者您可以只声明一个标题/徽标片段，您可以在其中添加起始渐变并将结束渐变添加到您的 css 的主体，以便它正确融合，如下所示：

CSS

body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

body {
    background-color: #f3ffff;
    margin:0px;
    height:10000px;
}

.header {
    height:300px;
    width:100%;
    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
    -webkit-linear-gradient(top, rgba(99, 173, 241, 1), rgba(0, 255, 255, 0));

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); 

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    -moz-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px
    );

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    -o-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px);
    background-position: center top, center top;
    background-repeat: no-repeat, repeat-x;
    background-size:auto;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
}

HTML

<div class="header">
    content
</div>

Demo

友情提示：对于寻找问题的任何人，您都可以在 Chrome 中看到它发生的情况：http://jsfiddle.net/skJGG/

【讨论】：

向 body 和 html 添加高度和宽度确实有效。谢谢！

【解决方案5】：

您是否尝试将background-size: auto, 250px 250px; — auto 设置为第一张图像，并将 250 像素设置为渐变。

如果您不需要大到足以覆盖整个页面的渐变图像，最好限制它的大小。除了大图的渲染问题，我认为对浏览器的性能更好。

因此，您的示例看起来像 http://jsfiddle.net/kizu/phPSb/（盲编码，但无法重现问题）。

【讨论】：

【解决方案6】：

不要使用背景图片，尝试使用 this(background) -

 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63adf1), color-stop(53%,#ffffff), color-stop(100%,#ffffff)); /* feel free to play with the % values to get what you are looking for */

并且始终使用十六进制值。但从用户体验的角度来看，最好使用 as in image（因为无论如何您都在加载图像），并且您不必担心跨浏览器兼容性。

【讨论】：

我想使用 RBGA 的主要原因是为了透明度；颜色从蓝色变为蓝绿色，从不透明变为透明，在灰白色背景上，有效地提供了非常令人愉快的蓝色 -> 蓝绿色 -> 白色渐变，手动生成会有些烦人。我会尝试使用半透明的 .png 图片来看看结果如何。
是的，我建议使用透明 png（请记住，它在 IE6 中不起作用）因为 RGBA 不适用于所有浏览器版本。但是试试上面的代码，如果我没记错的话，看看它是否会停止条带因为我遇到了同样的问题..当我在背景图像中使用它时......

【解决方案7】：

似乎 Chrome 在使用 rgba() 值时存在一些错误。我尝试了正常的十六进制值，它似乎为我解决了这个问题。

看看here，如果它也为你修复它。

编辑

看起来问题在于 250 像素的限制，因为它仅在设置时出现。

我想不出比this one更好的解决方案。

将 div 与您喜欢的渐变重叠，高度为 250 像素。然后，您可以将页面设置为任意高度，因为 div 始终为 250px 高。

【讨论】：

【解决方案8】：

Webkit 以相同的方式渲染 -webkit-gradient('linear'...) 和 webkit-linear-gradient。问题在于你的多重背景。我遇到了同样的问题，最后我以两个不同的元素叠加在一起，然后为每个元素提供了背景。比如：

<body>
 <div class="body-overlay"<div>
</body>

CSS

body{-webkit-linear-gradient(...)}
    .body-overlay{background:url('blah.png')}

我认为这是因为图像具有固定数量的像素

【讨论】：

这似乎不起作用；我完全去掉了繁荣，我仍然得到了绑带。鉴于它取决于整个页面的高度，我认为这与计算梯度的方式有关。
这就是我所知道的。希望你找到错误