CSS -webkit-linear-gradient 导致 Chrome/Safari 中出现条带
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7233649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
-webkit-linear-gradient causes banding in Chrome/Safari
提问by Li Haoyi
The title prettymuch says it all. The first picture below is a screenshot when the whole page is about 8000 pixels tall, taken in the latest version of Chrome:
标题基本概括了所有内容。下面的第一张图是整个页面大约8000像素高时的截图，在最新版本的Chrome中截取：
while this picture is for a different page (using the same CSS) which is about 800 pixels tall:
而这张图片是为一个不同的页面（使用相同的 CSS），它大约 800 像素高：
and here is the code:
这是代码：
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')";
}
The gradient is meant to cut off at 250px from the top of the page. The fact that the degree of banding seems to depend on the total height of the page is very strange: pages of heights in between these two (800px and 8000px) seem to have bands which are smaller than the first example but still noticeable.
渐变旨在从页面顶部截断 250 像素。条带的程度似乎取决于页面的总高度这一事实非常奇怪：高度介于这两者（800px 和 8000px）之间的页面似乎具有比第一个示例小但仍然明显的条带。
Interestingly, I was previously using -webkit-gradient('linear'...)instead and that did not have the same problem; I only swapped over to -webkit-linear-gradientso it would fall in line with my -mozand -ogradients.
有趣的是，我以前使用过-webkit-gradient('linear'...)，并且没有同样的问题；我只是换了，-webkit-linear-gradient所以它会符合我的-moz和-o渐变。
I haven't tried it on Safari, but the code above makes it work perfectly fine in Firefox and kind-of-work in Opera (the colors get messed up, but the gradient is still smooth). Nevermind IE, which i have given up on.
我还没有在 Safari 上尝试过，但是上面的代码使它在 Firefox 中工作得非常好，在 Opera 中也能正常工作（颜色变得混乱，但渐变仍然很平滑）。没关系IE，我已经放弃了。
Has anyone else seen this before?
有没有其他人见过这个？
Update: This happens on my Mac's Chrome/Safari too, but the bands are about 1/3 the size of the bands shown in the top image, for the exact same page. The banding is identical in both OSX Chrome and OSX Safari.
更新：这也发生在我的 Mac 的 Chrome/Safari 上，但对于完全相同的页面，条带大约是顶部图像中显示的条带大小的 1/3。OSX Chrome 和 OSX Safari 中的条带是相同的。
1/3 the size is still noticeable, but not quite so jarring. The actual page is at http://www.techcreation.sg/page/web/Intro%20to%20XTags/, if you want to see for yourself in some other browser. The CSS is "inline" css compiled in-browser using less.js.
1/3 的大小仍然很明显，但不是那么刺耳。实际页面位于http://www.techcreation.sg/page/web/Intro%20to%20XTags/，如果您想在其他浏览器中亲自查看。CSS 是使用less.js 在浏览器中编译的“内联” css。
采纳答案by Gringo Suave
Looks like a webkit bug. I came up with the work-around below, tested on the latest Chrome and FF. In short, you'll position a div containing the background behind your main content. I also added a few styles to make IE happier.
看起来像一个 webkit 错误。我想出了以下解决方法，并在最新的 Chrome 和 FF 上进行了测试。简而言之，您将在主要内容后面放置一个包含背景的 div。我还添加了一些样式以使 IE 更快乐。
Given this HTML:
鉴于此 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>
Combined with this stylesheet:
结合这个样式表：
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;
}
It should come out looking like this, regardless of window size:
无论窗口大小如何，它都应该看起来像这样：
回答by Andres Ilich
Your demo link does not work but i did some tests and it worked fine for me using Chrome when you add width/height of 100% to the body/html elements, like so:
您的演示链接不起作用，但我做了一些测试，当您将 100% 的宽度/高度添加到 body/html 元素时，它对我使用 Chrome 效果很好，如下所示：
body, html {
width:100%;
height:100%;
}
You can try that or you can just declare a header/logo piece where you can add the starting gradient and just add the ending gradient to the body of your css so it blends in correctly, like so:
您可以尝试这样做，或者您可以声明一个标题/徽标部分，您可以在其中添加起始渐变并将结束渐变添加到您的 css 正文中，以便正确混合，如下所示：
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
HTML
<div class="header">
content
</div>
Friendly note:For anybody looking for the issue you can see it happening here in Chrome: http://jsfiddle.net/skJGG/
友情提示：对于任何寻找该问题的人，您都可以在 Chrome 中看到它发生的情况：http: //jsfiddle.net/skJGG/
回答by Jose Faeti
Seems like Chrome has some bugs when using the rgba() values. I tried with normal hex values and it seems to fix the problem for me.
似乎 Chrome 在使用 rgba() 值时有一些错误。我尝试使用正常的十六进制值，它似乎为我解决了这个问题。
Look hereif it fix it for you also.
如果它也为您解决问题，请看这里。
Edit
编辑
Looks like the problem is in the 250px limit because it only appears when that is set.
看起来问题出在 250px 限制中，因为它仅在设置时出现。
I didn't manage to come up with a better solution than this one.
我没有想出比这个更好的解决方案。
Overlapping a div with the gradient you like, 250px tall. Then you can have the page as tall as you want because the div will always be 250px tall.
用你喜欢的渐变重叠一个 div，250px 高。然后您可以将页面设置为您想要的高度，因为 div 将始终为 250 像素高。
回答by ShalomSam
instead of using background-image, try using 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 */
and also use hex values always. But from an UX prospective it would be better to use as in image(since you are loading an image anyway) and you won't have to worry about cross browser compatibility.
并始终使用十六进制值。但是从 UX 的角度来看，最好在图像中使用（因为您无论如何都在加载图像）并且您不必担心跨浏览器兼容性。
回答by kizu
Have you tried setting background-size: auto, 250px 250px;— autofor first image and 250px for your gradient.
你有没有试过设置background-size: auto, 250px 250px;——auto第一张图片和 250px 的渐变。
When you don't need a gradient image so big that it would cover whole page it's best to limit it's size. Besides rendering problems with big images, I think that it's better for the browser's performance.
当您不需要大到足以覆盖整个页面的渐变图像时，最好限制其大小。除了渲染大图的问题外，我认为它对浏览器的性能更好。
So, you example would look like http://jsfiddle.net/kizu/phPSb/(blindcoded, couldn't reproduce the problem though).
所以，你的例子看起来像http://jsfiddle.net/kizu/phPSb/（盲编码，虽然无法重现问题）。
回答by Mohsen
Webkit render -webkit-gradient('linear'...)and webkit-linear-gradientin the same way. The problem is with your multiple backgrounds. I had same issue and I was ended with two different elements on top of each other and then giving a background to each of them. Something like:
WebKit的渲染-webkit-gradient('linear'...)，并webkit-linear-gradient以同样的方式。问题在于你的多重背景。我遇到了同样的问题，最后我以两个不同的元素叠加在一起，然后为每个元素提供了背景。就像是：
<body>
<div class="body-overlay"<div>
</body>
CSS
CSS
body{-webkit-linear-gradient(...)}
.body-overlay{background:url('blah.png')}
I think this happens because the image have fixed amount of pixels
我认为这是因为图像具有固定数量的像素
