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

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 で透明部分が黒くなる現象が発生。

iPhone Safari で黒く映った透明部分
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となりました。

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

参考

この記事を書いた人

アバター

アルム=バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。