ブログBlog

今回も実際の事例です。

背景を重ねて表示し、cssのz-indexを使い、背景の表示順を指定していたのですが、その際に、Safariで表示した際に、このz-indexが効かない事象に遭遇しました。

根本原因はSafariのバグっぽいのですが、transform: translateZ(1px);を用いて回避する事ができました。

メモしておきます。

 

z-indexが効かない条件

発生時のHTML文(簡易的に記載)

 

発生時のCSS文(簡易的に記載)

 

デザイン的に、ページのヘッダー(class=”page-header”のdiv)の画像部分をスクロールしても動かない背景画像にしたいため、疑似要素を使いz-index:-1;を指定し、position:fixed;で固定しました。

こうすることで、スクロールすると本文(class=”page-body”のdiv)がスクロールされ、ページのヘッダーに配置した画像は動くことなく、ページのヘッダーの枠だけが狭まっていくイメージになります。

後ろに固定した画像が表示されると困るので、フッターの前の要素(class=”page-beforefooter”のdiv)と、フッター(page-footer)に、それぞれ、z-indexを指定しています。

ところが、この時スクロールしていくと、後ろに固定し、z-index:-1;で指定した画像がフッター(z-index:2)の上に乗っかってくるという事象に遭遇しました。

フッターの前の要素(class=”page-beforefooter”のdiv)は、問題なく上に来ていました。

 

原因は、transformのレンダリングにあるようです。

今回、CSSのtransformは使用していないと思っているのですが、調べて見ると、Safariのtransformのレンダリング(プログラムで要素を操作する機能)の問題が原因で、z-indexが効かない事象に遭遇している方が多数いらっしゃいました。

調べて見ると、transformの2Dのレンダリングと3Dのレンダリングで表示順を制御する部分が異なり、混合して利用した場合、制御順に異常生じることがあるようです。

回避手段:transform: translateZ(1px);の埋め込み

transformは使用していないと思っていたのですが、safariの2Dレンダリングと3Dレンダリングで表示順を制御する部分が異なるとの事でしたので、回避手段として、transform:translateZ(1px);を埋め込んだところ回避できました。

回避した時のCSS文(簡易的に記載)

 

今回は、根本原因にはたどり着けませんでした。

WordPressで利用しているテーマやプラグインも関係しているかもしれません。

まずは回避できたので、良かった。。。

 

 

WEB DESIGN

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

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

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

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

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

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

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

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

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

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

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU