mờ Linear Gradient dừng trong chrome

Question

Nếu tôi đang sử dụng một gradient tuyến tính với nhiều điểm dừng như thế này:

div 
{ 
    border: 1px solid black; 
    width: 100px; 
    height: 2000px; 
    display: inline-block; 
    background-image: linear-gradient(to bottom, #383937 0, #001500 35px, 
    #ffffff 35px, #b0b0b0 150px, #ffffff 150px, #ffffff 100%); 
} 

Firefox Vấn đề miễn phí.

Chrome Chuyển tiếp giữa các màu gradient bị mờ. Tôi đang sử dụng lại vị trí để xác định màu mới, do đó, ở vị trí 35, màu sẽ chuyển từ # 001500 sang #ffffff ngay lập tức (hoặc ít nhất là nên). Độ mờ giữa gradient dừng lại tăng nếu div cao hơn.

IE Có một số điểm mờ như trong chrome, nhưng ít khắc nghiệt hơn. Giống như trong Chrome, độ nhòe tăng lên nếu div được làm cao hơn.

http://jsfiddle.net/cyq7grdr/5/

Các gradient trong firefox:

Các gradient trong chrome:

Các gradient trong chrome khi div ít cao (1000px thay của 2000px):

chỉnh sửa

Nó có vẻ như điều này được cố định trong chrome, nhưng giới thiệu trong firefox. Nếu bất cứ ai có thể xác nhận điều này, tôi sẽ hạnh phúc.

Answer 1

Không khắc phục được sự cố, chỉ có một cách giải quyết ... bạn có thể sử dụng nhiều độ dốc dưới dạng nhiều hình nền có kích thước đủ nhỏ để không kích hoạt sự cố (< ~ 300px dường như thực hiện). Kết hợp với background-size và background-position và bạn sẽ có được một cái gì đó là xấu xí, nhưng hoạt động:

background-image: 
    linear-gradient(to bottom, #383937 0, #001500 35px, #ffffff 35px, #b0b0b0 150px), 
    linear-gradient(to bottom, #963 0, #abc 150px); 
background-size: 
    100px 150px, 
    100px 150px; 
background-position: 
    0 0, 
    0 150px; 
background-repeat: no-repeat; 

Xem JSFiddle cho demo.