CSS Gradient在Chromium中很粗糙

Question

我有一個線性漸變作爲背景，在Firefox，Opera經典等中可以正常工作，但在Chromium（以及Android股票瀏覽器）中跳至10px條。你可以看到沒有平滑的漸變，而是2條紋。

我的問題是，我想要一個銳利的剪裁（藍/白），但由於10px剝剪切跳躍在10px步驟而不是1px。我在這裏有藍色框，應該與漸變對齊，但不是因爲這些10px的步驟。

background: -webkit-gradient(linear, left top, right top, color-stop(0px,#247), color-stop(800px,#247), color-stop(800px,#fff), color-stop(820px,#fff), color-stop(820px,#247), color-stop(1000px,#247)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, #247 0px,#247 800px,#fff 800px,#fff 820px,#247 820px,#247 1000px); /* Chrome10+,Safari5.1+ */ 
background: linear-gradient(to right, #247 0px, #247 800px, #fff 800px, #fff 820px,#247 820px, #247 1000px); /* W3C */ 

我還使用所有其他前綴版本（-moz，-o，-ms）。

編輯：好吧，我應該已經添加了一個演示，首先，在這裏它是：Codepen DEMO。左邊的藍色塊應該正好是1000px，與下面的控制塊一樣寬。它在Firefox和Opera Classic中，但不在Chrome和Chromium中。

Answer 1

這是鍍鉻的 「優化功能」 - 見this SO question獲取更多信息。從Chrome 35開始，您不能依靠漸變色停止創建的列的寬度。

看到this pen一個很酷的動畫演示和鏈接到bug（這些都在其他SO問題）。

Answer 2

爲什麼不使用梯度發生器？

1. http://gradients.glrzad.com/

2. http://www.colorzilla.com/gradient-editor/

甚至從微軟http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/