CSS linear gradient transparency chỉ hoạt động sai trong Safari

Question

Điều gì đó thực sự lạ đang xảy ra trong Safari. Tôi đang làm một lớp phủ gradient đơn giản để làm một hiệu ứng mờ dần văn bản. Nó hoạt động tốt trong Firefox và Chrome, chứ không phải Safari, mà tôi thấy lạ vì Safari và Chrome đều dựa trên Webkit.

Safari

Chrome và Firefox

CSS Mã

.text-fade { 
    background: linear-gradient(to top, white, transparent); 
    bottom: 0; 
    height: 25%; 
    margin: 0; 
    position: absolute; 
    width: 100%; 
} 

Answer 1

Thay vì:

background: linear-gradient(to top, white, transparent); 

Thử đặt trong suốt thành giá trị màu rgba. Ví dụ:

background: linear-gradient(to top, white, rgba(255,255,255,0)); 

Nói cách khác, giá trị rgb của cả hai màu phải khớp nhau. Ví dụ:

background: linear-gradient(to top, red, rgba(255,0,0,0)); 

Theo định nghĩa của spec w3c, minh bạch là đen trong suốt (rgba (0,0,0,0)). Điều đó có nghĩa là khi bạn đang ở giữa quá trình chuyển đổi, một số màu đen sẽ xuất hiện.

Màu được thấy trong Safari là màu chính xác, theo thông số kỹ thuật.