Chrome радиальный CSS градиент гладкостью

Question

Im используя chrome 18.0.1025.162 и пытаюсь сделать радиальный градиент

-webkit-radial-gradient(circle, rgba(100, 100, 100, 0.2), rgba(0, 0, 0, 0.9)) 

Проблема заключается в том, что градиент очень некачественно рода, переход цвета и альфа в блоках, а не гладкая , Это отличается от Safari и Firefox. Safari & Firefox делают это очень гладко и хорошо

Это ошибка с хромом? У кого-то такая же проблема. Его такой простой градиент! Несомненно, что-то простое, как это не может быть сбой

Отъезд: http://jsfiddle.net/GyRLe/1/ для демонстрации того, что я имею в виду.

Есть ли решение для этого? Изображение будет ужасно :(

(Ok так, чтобы видеть, как плохо Гладкость): Это то, что я получаю, когда им пользоваться: http://i.imgur.com/UYB1d.png (хром)
http://i.imgur.com/tzGuq.png (Safari) (кажется немного нервничала но то из-за PNG, в противном случае его близко к идеальной гладкости)

Firefox столь же хорошо, как Safari его просто хром делает это плохо мне нужен альфа, потому что Im положить изображение повторить стиль в фоновом режиме

Изменить: у Chrome 20 (Canary) тоже была эта ужасная проблема!

Edit2: Причина, по которой мы используем CSS, поэтому нам не нужны изображения! Так что я добавил это http://code.google.com/p/chromium/issues/detail?id=123491 & надеюсь, Google получает свое действие прямо, потому что я думаю, что хром является прекрасным

Answer 1

Я знаю, что он был размещен довольно давно, но я столкнулся с теми же проблемами (сильные полосатости) с Chrome 24 с помощью:

-webkit-radial-gradient(center, ellipse cover, #XXXXXX 0%,#YYYYYY 100%); 

Но я понял, что с помощью кода ниже обвязок почти исчезнувший:

-webkit-gradient(radial, center, 0px, center, 100%, color-stop(0%,#XXXXXX), color-stop(100%,#YYYYYY)); 

Надеюсь, это поможет.

Edit: Я видел, что -webkit-градиент (радиальный, ...) просто старый синтаксис для радиального отображения градиента, поэтому он не должен быть долгосрочный ответ на этот вопрос ...

Answer 2

Если вам не нужно альфа-значение, он выглядит намного более гладким, используя rgb вместо rgba.

Демо: http://jsfiddle.net/tKtV9/

Answer 3

Это не очень помогает в этом случае, но я заметил, что добавление

width: x-value; 
height: y-value; 

иногда может помочь. X-значение и Y-значение, конечно, являются вашими измерениями.