テキストに透明線形勾配を適用する - Safariのバグ

Question

画像の背景にある段落の白いテキストを白から透明にフェードインしようとしています。私はそれがクロムとFirefoxで動作しているが、Safariで動作するように見えない。

私の例では、テキストはSafariには表示されませんが、テキストを強調表示すると表示されます。ここJSFiddle：https://jsfiddle.net/ngaffer/fgxbfoL4/5/

<section> 
    <h3>Heading Three</h3> 
    <div class="hideContent"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis nec quam ac venenatis. Sed mollis aliquam nisl, ultricies facilisis justo viverra ac. Sed bibendum sagittis dolor sit amet gravida. Vivamus dictum, velit id bibendum sodales, diam mauris lobortis erat, eu blandit tellus neque vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis nec quam ac venenatis. Sed mollis aliquam nisl, ultricies facilisis justo viverra ac. Sed bibendum sagittis dolor sit amet gravida. Vivamus dictum, velit id bibendum sodales, diam mauris lobortis erat, eu blandit tellus neque vitae lorem.</p> 
    </div> 
</section> 

<style> 
section { 
    background-color: #111; 
    display: block; 
    overflow: hidden; 
    color: #fff; 
} 

.hideContent { 
    background: -webkit-linear-gradient(top, white 50%, rgba(255,255,255,0)); 
    background: -o-linear-gradient(top, white 50%, rgba(255,255,255,0)); 
    background: -moz-linear-gradient(top, white 50%, rgba(255,255,255,0)); 
    background: linear-gradient(top, white 50%, rgba(255,255,255,0)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: rgba(255,255,255,0); 
    height: 100px; 
} 
</style> 

Image of the desired effect

Answer 1

私はサポートはまだそこにまだないようこれをやって避けるだろう。

-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0)1em, rgba(0, 0, 0, 1)); 

をテキストクラスに：しかし...

私は追加することにより、所望の効果を達成することができますよ。 -webkit接頭と-

あなたは勾配

をテストし、クロム59に取り組んとFF 54の最初の色の後1emを減少/増加させることによって、フェードの量を制御することができます。私はSafariを持っていませんが、それはサポートされるべきです。

これはIE or Edge上では動作しませんが、それでも... 89％のサポートがあまりにも粗末ではありません。

section { 
 
    background-color: #111; 
 
    display: block; 
 
    overflow: hidden; 
 
    color: #fff; 
 
} 
 

 
.hideContent { 
 
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0)1em, rgba(0, 0, 0, 1)); 
 
    height: 100px; 
 
}

<section> 
 
    <h3>Heading Three</h3> 
 
    <div class="hideContent"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis nec quam ac venenatis. Sed mollis aliquam nisl, ultricies facilisis justo viverra ac. Sed bibendum sagittis dolor sit amet gravida. Vivamus dictum, velit id bibendum sodales, 
 
     diam mauris lobortis erat, eu blandit tellus neque vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis nec quam ac venenatis. Sed mollis aliquam nisl, ultricies facilisis justo viverra ac. Sed bibendum sagittis dolor 
 
     sit amet gravida. Vivamus dictum, velit id bibendum sodales, diam mauris lobortis erat, eu blandit tellus neque vitae lorem.</p> 
 
    </div> 
 
</section>