Safari(サファリ)でテキスト文字にグラデーション【CSS3】を反映させる方法

Safariでテキスト文字にグラデーションが反映されない
末富 将也
どもー、末富ことトミーです。
さて、九州ではまだ梅雨が開けません。
毎年、海の日には山口の角島に海水浴に行ってたのですが今年は雨でいけませんでした。
暑い夏が待ち遠しいです。

今回紹介するのは、Safari(サファリ)でテキスト文字にグラデーションを反映させる方法について紹介させていただきます。
先日あるサイトを作ってたのですが、ブラウザのSafariだけグラデーションが反映されず、3、4時間ほどはまってました。
最悪、画像で作ることも検討しましたが、かっこ悪いしSEO的にも良くないので、さんざん調査し解決策が見つかりました!

もし同じようなことで悩んでいるようでしたら、参考になれば幸いです。

グラデーションの記述方法について

グラデーション

 

 

まずは、このような簡単なグラデーション。
コードは、以下のとおり。

HTML

CSS
クラス「.mainT」にグラデーションの指示を書いてます。

これで、テキストグラデーションが作れます。
この例だと、Safariでも問題なくグラデーションが表示されているはずです。

問題はここからです。
テキスト文字の横に線を引いたりするパターンのときに問題が発生します。

グラデーション文字の両サイドに線を引く場合

ボーダーがついたグラデーション

このパターンをCSSで書くとこうなります。

HTML

CSS

本来であれば、これでいけるはずなのですが、Safariやwindowsのedgeなどではグラデーションが表示されず、テキスト文字が透過されてました。
結果は、このような表示に。

末富 将也
Safariで見るとこんんな感じ。
焦ります。しかもなぜかテキストを範囲指定すると表示されるというなぞの挙動・・・。
これって、バグっぽくない!?と判断。

さんざん調べてそれらしい記事を見つけたので、試してみました。
transparentを使用するとSafariでだめなので、rgbaで記述で対応するとのことでした。

CSSを改修

15行目から17行目を改修・・・。
これもダメでした。

解決策について

さんざん試してダメでしたが、海外サイトで解決策を見つけました。
結論から言いますと、display: flexとbackground-clipを同時に利用すると表示されなくなるsafariのバグでした!
.mainTとspanを入れ子にし、記述を分けることで対応可能です。

HTML側

spanを入れ子にして追加します。

CSS側

Sassで書いてますが、「.mainT」にdisplay:flexを記述。
span側に両サイドの線のグラデーションの指示とbackground-clipの指示を記述。

これでSafariでもwindowsのedgeでも問題なく表示されることを確認しました!

ボーダーがついたグラデーション

まとめ

Safari、edgeにはdisplay: flexとbackground-clipを同時に利用すると表示されなくなるバグがある!
これだけ頭に入れておけば、入れ子にするなりして対応することができますよね!
もし、テキスト文字のグラデーションで困っている方に参考になれば幸いです。

最後まで読んでいただき、ありがとうございました。

Safariでテキスト文字にグラデーションが反映されない

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA