Safariの時、CSSのテキストグラデーションが効かない事例
テキストグラデーション
上記のテキストグラデーションは、Chrome/Edge/Safari、いずれも正常に表示。
しかし、下記は、Safariで見るとテキストグラデーションが効いていないはず。
テキストグラデーション
Safariの時、CSSのテキストグラデーションが利用できない条件がある。
テキストにグラデーションを書けると、デザイン的にもカラフルになるので、結構多用しているサイトも多いかと思います。
今回は、CSSを使ってテキストにグラデーションをかけた際に、Safariだけがグラデーションがかからず、文字が見えなくなる事象に遭遇しました。
その原因のメモです。
結論から言いますと、「display:table;」が原因でした。「display:table」では無く、「display:inline-block;」を用いたところ、改善されました。
Safariの不具合のような気がします。いつか改善される事を期待します。
上の２つのテキストグラデーションがSafariで両方見られるようになれば改善されています。
その他、ネットを調べて見ると、「display:flex」も注意が必要なようです。display:flexとbackground-clipを併用すると同じ様に表示されなくなるとの事。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /* テキストにグラデーションをかけるCSS */ .text-gradient{ display:inline-block; text-align:center; font-size:30px; font-weight:900; background: -webkit-linear-gradient(0deg, #FF0000, #00FF00, #0000FF); background: linear-gradient(0deg, #FF0000, #00FF00, #0000FF); transform:scale(1,2); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Safariの時のみテキストにグラデーションをかけられないCSS */ .text-gradient2{ display:table; /* 原因の箇所 */ text-align:center; font-size:30px; font-weight:900; background: -webkit-linear-gradient(0deg, #FF0000, #00FF00, #0000FF); background: linear-gradient(0deg, #FF0000, #00FF00, #0000FF); transform:scale(1,2); -webkit-background-clip: text; background-clip: text; color: transparent; } |
こういったブラウザ差分は、無くなって欲しいですね。
WEB DESIGN全てお任せ！ホームページ制作
RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。
「全てお任せ！ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。
運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。
しかもなんと、「全てお任せ！ホームページ制作」は、￥100,000！で提供しております。
本業が忙しい中小企業様に大変ご好評を頂いている商品です。
独自ドメイン取得
サーバー開設＆設定
レイアウト設計
レスポンシブルデザイン
(*1)
検索エンジン最適化
(SEO対策)
場所Maps
お問い合わせフォーム
SSL化
各種SNS連携
運用マニュアル
