尽管都由-webkit控制，但在chrome和safari中使用线性渐变颜色停止以不同的高度呈现不同的列？答案

【问题标题】：Using linear gradient color stops for equal height columns rendering differently in chrome and safari despite both being controlled by -webkit?尽管都由-webkit控制，但在chrome和safari中使用线性渐变颜色停止以不同的高度呈现不同的列？
【发布时间】：2013-11-22 16:09:39
【问题描述】：

这让我发疯了——我关注了 Chris Coyiers 关于流体宽度等高列的帖子。我选择使用效果很好的 Doug Neiner 方法，唯一的问题是，当缩小人造列时，safari 和 chrome 之间的“速度”不同。这意味着 safari 使所有内容保持整洁和内联，并且 chrome 似乎在所有重要的断点处都关闭了。我不明白为什么当它们都由 -webkit 控制时会发生这种情况。

基本上这是我的设置。

我有两个“行”，每个“行”是一篇文章，其中包含一张图片，然后是一个 div，下面有一个描述。在 Safari 中，当我将浏览器缩小到不同的断点时，一切都排成一行。然而，在 chrome 中创建了一个间隙，就像渐变背景比图像缩小的速度更快。

HTML

 <article class="rowContainer">
  <div class="rowOne">
     <section class="floatLeft textLightGreyArea">
       <img src="..." />
       <p>Description goes here</p>
     </section>

     <section class="floatLeft textDarkGreyArea">
       <p>Description goes here</p>
       <img src="..." />
     </section>
  </div>
 </article>


 <article class="rowContainer">
  <div class="rowTwo">
     <section class="floatLeft textLightGreyArea">
       <img src="..." />
       <p>Description goes here</p>
     </section>

     <section class="floatLeft textDarkGreyArea">
       <img src="..." />
       <p>Description goes here</p>
     </section>
  </div>
 </article>

CSS

     .rowContainer:after {
     visibility: hidden;
     display: block;
     content: "";
     clear: both;
     height: 0;
     font-size: 0;
     }

     .rowContainer {
     display: inline-block;
     }

    .rowOne {
       overflow: hidden;
       background: #c9c9c9;
       background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #c9c9c9),  
       color-stop(49.99%, #c9c9c9), color-stop(49.99%, #e0e0e0), color-stop(100%, #e0e0e0));
       background-image: -webkit-linear-gradient(left, #c9c9c9, #c9c9c9 49.99%, #e0e0e0 49.99%, 
       #e0e0e0 100%);
       background-image: -moz-linear-gradient(left, #c9c9c9, #c9c9c9 49.99%, #e0e0e0 49.99%,    
       #e0e0e0 100%);
       }

       .rowTwo {
       overflow: hidden;
       background: #e0e0e0;
       background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #e0e0e0),   
       color-stop(49.99%, #e0e0e0), color-stop(49.99%, #c9c9c9), color-stop(100%, #c9c9c9));
       background-image: -webkit-linear-gradient(left, #e0e0e0, #e0e0e0 49.99%, #c9c9c9 49.99%,    
       #c9c9c9 100%);
       background-image: -moz-linear-gradient(left, #e0e0e0, #e0e0e0 49.99%, #c9c9c9 49.99%, 
       #c9c9c9 100%);
       }

       .floatLeft {
       width: 49.99%;
       float: left;
       }

【问题讨论】：

并非所有的 WebKit 都是平等的。
好的，有没有办法解决它 - 我在想也许有一种方法可以让我只针对 chrome 定位渐变百分比并使用媒体查询在每个断点处排列它？它会导致 chrome 出现间隙，而不是缩小内联，所以如果可能的话，我需要找到解决方法。
看到这个类似的问题stackoverflow.com/questions/23627292/…

标签： css google-chrome safari gradient

【解决方案1】：

我在研究this SO question时发现了这个问题的答案

这是由于 Blink 的渐变渲染中的舍入错误（谷歌有分支的 webkit）。

请参阅this pen 以获得很酷的动画演示和错误链接（这些都在另一个 SO 问题中）。

【讨论】：