Webkit线性渐变停止呈现不正确 [英] Webkit linear gradient stops render incorrectly

问题描述

我在webkit浏览器（Chrome，Opera）中遇到了一个奇怪的问题。

测试用例：生成渐变。

这种问题是否有错误报告或解决方法？

解决方案

h2> Update 2015-11-25

这个问题的解决方案最终在管道中 - 请参阅 https://codereview.chromium.org/1457783005 。

tl; dr;

这是chrome中的错误功能。

详情

我已经在 http://codepen.io/elliz/pen/fCsay ，但它仍然是Chrome中的一个问题 - 我发现了一个错误报告（下面）。

  ; div class =wrapper> 
< div> 
尝试调整此页面大小，两种颜色之间的边框应该在大多数浏览器中流畅，但会在Chrome中跳转。 
< / div> 
< / div> 
  

css

  .wrapper {
 background：linear-gradient（向右，＃c93 66％，＃2989d8 66％）; 
} 
 
 .wrapper div {
 width：66％; 
 border-right：1px dotted white; 
} 
  

可能需要返回使用伪列或其他旧校设计。 ..或者如果您的用户群只使用最新的浏览器尝试新的闪亮和使用flexbox;）

编辑

$ b b

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

¥b $ b

< a href =http://en.wikipedia.org/wiki/Skia_Graphics_Engine =nofollow> skia 将颜色离散化为256级（大量）速度。硬边

这样的渐变（在同一停色处有两种颜色）

绝对显示此限制。我们可以看看增加

精度的方法，但是会有一个真正的性能成本，所以我们必须决定

这种特定的行为在实践中有多重要。

I have come across a weird problem in webkit browsers (Chrome, Opera).

Test case: http://sample.easwee.net/gradient-bug/ (check in Chrome or latest Opera)

I have two columns wrapped by a container. I'm applying a CSS gradient to create backgrounds for this two columns. The color stop is set to 66% and columns have the same 66% width (using padding to offset the right column).

It renders correctly in Firefox - both column layout and gradient stop point match, but in webkit based browsers the color stop is not matching the column width, although I've used 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;}

Screenshot:

I've used Colorzilla generator to generate the gradient.

Are there any bug reports or workarounds for this kind of problem?

解决方案

Update 2015-11-25

A fix for this is finally in the pipeline - see https://codereview.chromium.org/1457783005.

tl;dr;

It is a bug feature in chrome.

Details

I have simplified my test cases massively at http://codepen.io/elliz/pen/fCsay and it still appears to be an issue in Chrome - and I have found a bug report (below).

<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;
}

May have to go back to using Faux Columns or other old-school designs ... or if your user-base only uses the latest browsers try out the new shiny and use flexbox ;)

Edit

I found a bug at - http://code.google.com/p/chromium/issues/detail?id=233879 and https://code.google.com/p/chromium/issues/detail?id=281489

skia discretizes the colors into 256 levels for (lots of) speed. hard-edged
gradients like this (where there are two colors at the same color-stop)
definitely show up this limitation. We can look at ways to increase
precision, but there will be a real performance cost, so we have to decide
how important this particular behavior is in practice.

这篇关于Webkit线性渐变停止呈现不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！