सीएसएस रैखिक ढाल पारदर्शिता केवल सफारी में दुर्व्यवहार

Question

सफारी में वास्तव में कुछ अजीब हो रहा है। मैं एक पाठ फीका प्रभाव करने के लिए एक सरल ढाल ओवरले कर रहा हूँ। यह फ़ायरफ़ॉक्स और क्रोम में ठीक काम करता है, लेकिन सफारी नहीं, जो मुझे अजीब लगता है क्योंकि सफारी और क्रोम दोनों वेबकिट आधारित हैं।

सफारी

Chrome और Firefox

सीएसएस कोड

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

Answer 1

बजाय:

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

अपने पारदर्शी को आरजीबीए रंग मान में सेट करने का प्रयास करें। उदाहरण के लिए:

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

दूसरे शब्दों में, दोनों रंगों का आरजीबी मान मेल खाना चाहिए। उदाहरण के लिए:

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

के रूप में W3C कल्पना, पारदर्शी द्वारा परिभाषित काला पारदर्शी (RGBA (0,0,0,0)) है। इसका मतलब है कि जब आप संक्रमण के बीच में होते हैं, तो कुछ काला दिखना चाहिए।

चश्मा के अनुसार सफारी में देखा गया रंग सही है।