Solid gradients not really solid? Don't have crisp edges at color stops

问题

In CSS, this seems to be the easiest way to create solid looking gradients where colors end and start abruptly at color stops. Example -

background-image:linear-gradient(to bottom, gray 100px, white 0); /*Let the browser decide*/

OR

background-image:linear-gradient(to bottom, gray 100px, white 100px); /*Explicitly specify.*/

What happens is that a gradient is generated but it doesn't really have crisp edges where the colors meet. My assumption was that the code would result in gray stopping at 100px and white starting right after it.

But it turns out that it's still a bit blurry. I have put together an example below( view it as Full Page). At the center of the screen where the gray and white meet, you can see the difference.

• Why does this happen? Is it because of the calculations browsers need to do?
• Any way to get absolute crisp edges where the colors meet?

Edit - Even pixel values don't do a great job.

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
html,
body {
  height: 100%;
}
body {
  background: linear-gradient(to bottom, #999 10em, white 0)
}
.container {
  width: 50%;
  height: 100%;
}
.gradient {
  background: #999;
  height: 10em;
}

<div class="container">
  <div class="gradient"></div>
</div>

回答1:

As @Mr Lister mentioned in comments, looks like a bug with Chrome. Finding a Mac machine to see if it's the same with safari too. That way I can raise a bug for both.

回答2:

This seems to be a general bug. It appears not only in Chrome (latest FF has it), though different browsers/engines have different symptoms and scale.

For example, the blurry edge will grow if you put a «straight-edged» linear-gradient on a very big element.

See my test case on jsfiddle: http://jsfiddle.net/matvey_andreyev/ufadpo1n/ Chrome behaves quite strangely with a very high element.

The code itself:

<div class="padding">
    <div id="gradient"></div>
    <div class="controls">
        <div class="part">
             <h3>Demo of a blurry edge where a straight one is expected</h3>
 <strong>linear-gradient</strong>( to bottom, transparent,
            <br />transparent
            <input class="tool" type="text" id="edge1" value="50px" />,
            <input type="text" class="tool" id="color2_1" value="#d00" />
            <input type="text" class="tool" id="edge2" value="50px" />,
            <input type="text" class="tool" id="color2_2" value="#d00" />
            <input type="text" class="tool" id="edgeLast" value="100%" />)
            <br/> <strong>height:</strong> 
            <input type="text" class="tool2" id="height" value="300px" />
        </div>
        <div class="part">
             <h4>Some preset examples</h4>

            <p><span class="preset" id="default">default values</span>
            </p>
            <p><span class="preset" id="bigLast">10000px position of the last color stop</span>
            </p>
            <p><span class="preset" id="edge1greater">1st color stop greater than second</span>
            </p>
            <p><span class="preset" id="skyscraper">Set great height to the #gradient</span>
            </p>
            <p>Don't forget viewing in different browsers.</p>
        </div>
    </div>
</div>

<style type="text/css">
html, body {
    min-height:100%;
    margin:0;
    padding:0;
}
.padding {
    padding:20px;
    background-color:#ddd;
    position:relative;
    height:calc(100%);
}
#gradient {
    height:300px;
    background-position:0 0;
    background-image: linear-gradient(to bottom, transparent, transparent 50px, #d00 50px, #d00 100%);
    border-style:dotted;
    border-width:1px;
    border-color:#fff;
}
.controls {
    background-color:#fff;
    padding:30px 30px 15px;
    font-size:13px;
    color:#444;
    box-shadow:1px 1px 3px rgba(0, 0, 0, 25);
    max-width:500px;
    position:absolute;
    top:30px;
    right:30px;
}
h3 {
    margin:0 0 .5em;
}
h4 {
    margin:0;
}
.tool, .tool2 {
    width:40px;
}
.preset {
    cursor:pointer;
    color:#00d;
    border-style:dashed;
    border-width:0 0 1px;
}
.preset:hover {
    color:#d00;
}
.part {
    margin:0 0 15px;
}
</style>

<script type="text/javascript">
$(document).ready(function () {
    var $edge1 = $('#edge1'),
        $edge2 = $('#edge2'),
        $color2_1 = $('#color2_1'),
        $color2_2 = $('#color2_2'),
        $edgeLast = $('#edgeLast'),
        $gradient = $('#gradient'),
        $height = $('#height'),
        defaultGrad = $gradient.css('background-image'),
        defaultHeight = $gradient.css('height'),
        setDefaultValues,
        changeGrad,
        changeHeight;

    setDefaultValues = function setDefaultValues() {
        $gradient.css({
            'background-image': defaultGrad,
                'height': defaultHeight
        });
        $edge1.val('50px');
        $edge2.val('50px');
        $edgeLast.val('100%');
        $color2_1.val('#d00');
        $color2_2.val('#d00');
        $height.val(defaultHeight);
    }

    changeGrad = function changeGrad() {
        $gradient.css({
            'background-image': 'linear-gradient(to bottom, transparent, transparent ' + $edge1.val() + ', ' + $color2_1.val() + ' ' + $edge2.val() + ', ' + $color2_2.val() + ' ' + $edgeLast.val() + ')'
        });
    }

    changeHeight = function changeHeight() {
        $gradient.css({
            'height': $height.val()
        });
    }

    $('.tool').on('focus blur keyup change', changeGrad);
    $('.tool2').on('focus blur keyup change', changeHeight);

    $('#default').click(function () {
        setDefaultValues();
        changeGrad();
    });

    $('#bigLast').click(function () {
        setDefaultValues();
        $edgeLast.val('10000px');
        changeGrad();
    });

    $('#edge1greater').click(function () {
        setDefaultValues();
        $edge1.val('55px');
        changeGrad();
    });

    $('#skyscraper').click(function () {
        $height.val(50000 + 'px');
        changeHeight();
    });

});
</script>

There seems to be no real answer to this at the moment. I ended up using a background image instead of the linear-gradient in the ends.

来源：https://stackoverflow.com/questions/33151371/solid-gradients-not-really-solid-dont-have-crisp-edges-at-color-stops