Webkit线性渐变停止渲染不正确

时间:2014-05-13 09:20:36

标签: css3 webkit linear-gradients

我在webkit浏览器(Chrome,Opera)中遇到了一个奇怪的问题。

测试用例:http://sample.easwee.net/gradient-bug/(在Chrome或最新Opera中检查)

我有两个由容器包裹的列。我应用CSS渐变为这两列创建背景。颜色停止设置为66%,列具有相同的66%宽度(使用填充来偏移右列)。

它在Firefox中正确呈现 - 列布局和渐变停止点匹配,但在基于webkit的浏览器中,颜色停止与列宽不匹配,尽管我已使用66%

HTML:

<div class="special-container">
    <div class="special-container-inner">
        <div class="special-container-column-L">
            <img src="http://placehold.it/1070x600" />
        </div>
        <div class="special-container-column-R">
            <img src="http://placehold.it/530x345" />
            <h3>Test</h3>
            <p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
        </div>
        <div class="clear"></div>
     </div>
</div>

CSS:

.special-container {}
.special-container-inner {max-width:1600px;margin:0 auto;
    background: #ff0000;
    background: -moz-linear-gradient(left,  #ff0000 0%, #ff0000 66%, #2989d8 66%, #2989d8 66%, #2989d8 100%, #207cca 100%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(66%,#ff0000), color-stop(66%,#2989d8), color-stop(66%,#2989d8), color-stop(100%,#2989d8), color-stop(100%,#207cca), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(left,  #ff0000 0%,#ff0000 66%,#2989d8 66%,#2989d8 66%,#2989d8 100%,#207cca 100%,#7db9e8 100%);
    background: -o-linear-gradient(left,  #ff0000 0%,#ff0000 66%,#2989d8 66%,#2989d8 66%,#2989d8 100%,#207cca 100%,#7db9e8 100%);
    background: -ms-linear-gradient(left,  #ff0000 0%,#ff0000 66%,#2989d8 66%,#2989d8 66%,#2989d8 100%,#207cca 100%,#7db9e8 100%);
    background: linear-gradient(to right,  #ff0000 0%,#ff0000 66%,#2989d8 66%,#2989d8 66%,#2989d8 100%,#207cca 100%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#7db9e8',GradientType=1 );
}

.special-container-column-L {width:66%;float:left;text-align:right;}
.special-container-column-L img {display:inline-block;vertical-align:top;max-width:100%;opacity:0.8;}
.special-container-column-R {padding-left:66%;}
.special-container-column-R img {display:inline-block;vertical-align:top;max-width:100%;width:100%;opacity:0.9;}
.clear {clear:both;}

截图:

enter image description here

我已使用Colorzilla generator生成渐变。

此类问题是否有错误报告或解决方法?

1 个答案:

答案 0 :(得分:4)

更新2015-11-25

对此的修复最终正在进行中 - 请参阅https://codereview.chromium.org/1457783005

TL;博士;

这是chrome中的 bug 功能。

详细

我已经在http://codepen.io/elliz/pen/fCsay大量简化了我的测试用例,但它似乎仍然是Chrome中的一个问题 - 我发现了一个错误报告(如下)。

<div class="wrapper">
    <div>
        Try resizing this page, the border between two colours should be smooth in most browsers, but will jump around in Chrome.   
    </div>
</div>

CSS

.wrapper {
  background: linear-gradient(to right, #c93 66%, #2989d8 66%);
}

.wrapper div {
  width:66%;
  border-right: 1px dotted white;
}

可能必须回到使用Faux Columns或其他老派设计......或者如果您的用户群只使用最新的浏览器,请尝试新的闪亮并使用flexbox;)

修改

我在 - http://code.google.com/p/chromium/issues/detail?id=233879https://code.google.com/p/chromium/issues/detail?id=281489

发现了一个错误
  

skia将颜色离散化为256级(很多)速度。锋芒毕露
  像这样的渐变(在同一颜色停止处有两种颜色)
  绝对显示出这个限制。我们可以看看增加的方法   精确,但会有一个真正的性能成本,所以我们必须决定   这种特殊行为在实践中的重要性。