发表新帖
发表新帖

-webkit-linear-gradient causes banding in Chrome/Safari

前端 未结
关注
6 1778
别跟我提以往
别跟我提以往 2021-01-01 12:44

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:

相关标签:
6条回答
  • 我在风中等你
    2021-01-01 13:06

    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.

    0 讨论(0)
  • 爱一瞬间的悲伤
    2021-01-01 13:12

    Webkit render -webkit-gradient('linear'...) and webkit-linear-gradient in 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:

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

    CSS

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

    I think this happens because the image have fixed amount of pixels

    0 讨论(0)
  • 被撕碎了的回忆
    2021-01-01 13:14

    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.

    Look here if it fix it for you also.

    Edit

    Looks like the problem is in the 250px limit because it only appears when that is set.

    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.

    0 讨论(0)
  • 小蘑菇
    2021-01-01 13:16

    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:

    Chrome image

    0 讨论(0)
  • 鱼传尺愫
    2021-01-01 13:17

    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:

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

    Demo

    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

    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

    Friendly note: For anybody looking for the issue you can see it happening here in Chrome: http://jsfiddle.net/skJGG/

    0 讨论(0)
  • 孤独总比滥情好
    2021-01-01 13:19

    Have you tried setting background-size: auto, 250px 250px; — auto for first image and 250px for your gradient.

    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).

    0 讨论(0)
 看不清?
提交回复
热议问题