ブログBlog

Safariの時、CSSのテキストグラデーションが効かない事例

テキストグラデーション

上記のテキストグラデーションは、Chrome/Edge/Safari、いずれも正常に表示。

しかし、下記は、Safariで見るとテキストグラデーションが効いていないはず。

テキストグラデーション

 

Safariの時、CSSのテキストグラデーションが利用できない条件がある。

テキストにグラデーションを書けると、デザイン的にもカラフルになるので、結構多用しているサイトも多いかと思います。

今回は、CSSを使ってテキストにグラデーションをかけた際に、Safariだけがグラデーションがかからず、文字が見えなくなる事象に遭遇しました。

その原因のメモです。

 

結論から言いますと、「display:table;」が原因でした。「display:table」では無く、「display:inline-block;」を用いたところ、改善されました。

Safariの不具合のような気がします。いつか改善される事を期待します。

上の2つのテキストグラデーションがSafariで両方見られるようになれば改善されています。

その他、ネットを調べて見ると、「display:flex」も注意が必要なようです。display:flexとbackground-clipを併用すると同じ様に表示されなくなるとの事。

こういったブラウザ差分は、無くなって欲しいですね。

 

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥100,000!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU