-webkit-linear-gradient导致Chrome / Safari中的条带 [英] -webkit-linear-gradient causes banding in Chrome/Safari

问题描述

标题prettymuch说这一切。下面的第一张图片是整个网页大小高达8000像素，采用最新版本的Chrome时的屏幕截图：

大约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 ，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）似乎具有小于第一示例但仍然显而易见的频带。 p>

有趣的是，我之前使用的是 -webkit-gradient（'linear'...）同样的问题;我只交换到 -webkit-linear-gradient ，所以它会符合我的 -moz 和 -o 渐​​变。

我没有在Safari上试过，但上面的代码使它在Firefox和歌剧中的工作种类（颜色混乱，但渐变仍然平滑）。

更新：此版本中有更新版本发生在我的Mac的Chrome / Safari，但乐队是大约1/3的顶部图片中显示的乐队的大小，对于完全相同的页面。在OSX Chrome和OSX Safari中的条带是相同的。

1/3的尺寸仍然明显，但不是那么震撼。实际网页位于 http://www.techcreation.sg/page/ web / Intro％20to％20XTags / ，如果你想在其他浏览器中看到自己。 CSS是使用less.js在浏览器中编译的inlinecss。

解决方案

看起来像一个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>留下评论！< / div> 
< div class =comment>您的评论。< / div> 
< / div> 
< / body> 
< / html> 
  

结合此样式表：

  body {
 background-color：＃f3ffff; 
 min-height：100％; 
 margin：0px; 
} 
 .background {
 height：250px; 
 left：0; 
 position：absolute; / *可以使用固定的，如果你喜欢。 * / 
 right：0; 
 top：0; 
 z-index：-10; 
 
 background-image：
 -webkit-linear-gradient（top，
 rgba（99，173，241，1）0px，
 rgba ，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 b $ b）; / * W3C * / 
 background-position：center top，center top; 
 background-repeat：no-repeat，repeat-x; 
} 
 .content_pane {
 background：white; 
 border：1px dotted white; 
 border：1px solid gray; 
 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; 
} 
  

无论窗口大小如何， >

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:

while this picture is for a different page (using the same CSS) which is about 800 pixels tall:

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.

Interestingly, I was previously using -webkit-gradient('linear'...) instead and that did not have the same problem; I only swapped over to -webkit-linear-gradient so it would fall in line with my -moz and -o gradients.

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.

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.

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.

解决方案

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.

Given this 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:

这篇关于-webkit-linear-gradient导致Chrome / Safari中的条带的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！