BETA

css の `linear-gradient` で `transparent` を指定して透過すると iPhone Safari で黒くなる

投稿日:2020-07-13
最終更新:2020-07-13

css の linear-gradient を使用して「続きを読む」のような透過を実装しようとしました。

.HGWells {  
    $hide-height: 100px;  
    height: $hide-height;  
    overflow: hidden;  
    position: relative;  
    &::after {  
        background: linear-gradient(to bottom, transparent, $bg-color);  
        content: "";  
        width: 100%;  
        height: $hide-height;  
        display: block;  
        position: absolute;  
        top: 0;  
        left: 0;  
    }  
}  

しかし、以下の図のように iPhone Safari で透明部分が黒くなる現象が発生。

調べてみると、 transparentrgba(0, 0, 0, 0) のショートハンドだそうです。つまり、「透明」ではなく「透明度が0の黒」ということ。これが Safari では黒として表示されてしまようです。

.HGWells {  
    $hide-height: 100px;  
    $bg-color: #fff;  
    height: $hide-height;  
    overflow: hidden;  
    position: relative;  
    &::after {  
        background: linear-gradient(to bottom, rgba($bg-color, 0), $bg-color);  
        content: "";  
        width: 100%;  
        height: $hide-height;  
        display: block;  
        position: absolute;  
        top: 0;  
        left: 0;  
    }  
}  

そこで linear-gradient の中を to bottom, rgba($bg-color, 0), $bg-colorrgba() 指定に変更しました。

これでどのブラウザでもOKとなりました。

しかし、こんなところに罠があるとは……。

参考

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

アルム=バンドのQrunch

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう