Chrome xuyên tâm css dốc êm ái

Question

Im sử dụng chrome 18.0.1025.162 và đang cố gắng để làm một radial gradient

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

Vấn đề là gradient là loại rất pixelated của, quá trình chuyển đổi trong màu sắc và alpha trong khối và không được mịn màng . Điều này là khác nhau trong Safari và Firefox. Safari & Firefox hoạt động rất mượt mà và tốt

Đây có phải là lỗi với chrome không? Bất cứ ai cũng có cùng một vấn đề với điều này. Một gradient đơn giản của nó !! Chắc chắn một cái gì đó đơn giản như thế này không thể là một trục trặc

Kiểm tra: http://jsfiddle.net/GyRLe/1/ để có bản trình diễn ý tôi.

Có giải pháp cho việc này không? Một hình ảnh sẽ là khủng khiếp :(

(Ok như vậy để xem làm thế nào xấu êm ái là): Đây là những gì tôi nhận được khi im sử dụng nó: http://i.imgur.com/UYB1d.png (Chrome)
http://i.imgur.com/tzGuq.png (Safari) (Có vẻ một chút sắc nét nhưng thats vì png, nếu không chặt chẽ để êm ái hoàn hảo)

Firefox chỉ là tốt như Safari chỉ chrome của mình đang làm nó tồi tệ tôi cần alpha vì Im đặt một hình ảnh phong cách lặp lại trong nền

Chỉnh sửa: Chrome 20 (Canary) cũng gặp sự cố khủng khiếp này!

Chỉnh sửa2: Lý do chúng tôi sử dụng CSS là vì vậy chúng tôi không phải sử dụng hình ảnh! Vì vậy, tôi đã thêm này để http://code.google.com/p/chromium/issues/detail?id=123491 & hy vọng google được hành động của họ thẳng vì tôi nghĩ rằng chrome là tuyệt vời

Answer 1

Tôi biết rằng nó đã được đăng trong một thời gian khá dài trước đây, nhưng tôi gặp phải cùng một vấn đề (dải mạnh mẽ) với Chrome 24 sử dụng:

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

Nhưng tôi nhận ra rằng việc sử dụng mã bên dưới dải gần biến mất:

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

Hy vọng điều này sẽ hữu ích.

Chỉnh sửa: Tôi đã thấy rằng -webkit-gradient (radial, ...) chỉ là cú pháp cũ cho hiển thị gradient xuyên tâm, do đó, nó không phải là câu trả lời dài hạn cho vấn đề đó ...

Answer 2

Nếu bạn không cần giá trị alpha, có vẻ mượt mà hơn rất nhiều sử dụng rgb thay vì rgba.

Demo: http://jsfiddle.net/tKtV9/

Answer 3

Nó không giúp gì nhiều trong trường hợp này, nhưng tôi đã nhận thấy rằng việc thêm

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

đôi khi có thể giúp đỡ. Giá trị X và giá trị Y, tất nhiên, là thứ nguyên của bạn.