ブログBlog

HOME
ブログ
プログラミング
Safariの時、z-indexが効かない場合がある。

2022年1月9日 / 最終更新日時 : 2022年1月9日 info@rishuntrading.co.jp

Safariの時、z-indexが効かない場合がある。

今回も実際の事例です。

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

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

メモしておきます。

z-indexが効かない条件

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

<body class="blog20220109">
  <div class="page-header">
    <p>疑似要素afterを使い、z-index:-1で画像を背景に使用</p>
  </div>
  <div class="page-body">
  </div>
  <div class="page-beforefooter">
    <p>z-index:1を指定しています。</p>
  </div>
  <!--事象の発生する箇所(背景が上に来る)-->
  <div class="page-footer">
    <p>z-index:2を指定しています。</p>
  </div>
</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<p>疑似要素afterを使い、z-index:-1で画像を背景に使用</p>

</div>

</div>

<p>z-index:1を指定しています。</p>

</div>

<p>z-index:2を指定しています。</p>

</div>

</body>

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

.page-header{
	width:100%;
	padding-top:300px;
	position:relative;
	display:block;
	z-index:1;
}
.page-header:after{
	content:'';
	display:block;
	width:100%;
	height:100%;
	background:url('./images/blog/blog20220109.jpg') center center / cover no-repeat;
	z-index:-1;
	position:fixed;
	top:0;
	left:0;
}
.page-beforefooter{
	position: relative;
	z-index: 1;
}
.page-footer{	/* 後ろの背景が上に乗る */
	position: relative;
	z-index: 2;
}

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

.page-header{

width:100%;

padding-top:300px;

position:relative;

display:block;

z-index:1;

}

.page-header:after{

content:'';

display:block;

width:100%;

height:100%;

background:url('./images/blog/blog20220109.jpg') center center / cover no-repeat;

z-index:-1;

position:fixed;

top:0;

left:0;

}

.page-beforefooter{

position: relative;

z-index: 1;

}

.page-footer{ /* 後ろの背景が上に乗る */

position: relative;

z-index: 2;

}

デザイン的に、ページのヘッダー(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の２Dのレンダリングと３Dのレンダリングで表示順を制御する部分が異なり、混合して利用した場合、制御順に異常生じることがあるようです。

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

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

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

.page-header{
	width:100%;
	padding-top:300px;
	position:relative;
	display:block;
	z-index:1;
}
.page-header:after{
	content:'';
	display:block;
	width:100%;
	height:100%;
	background:url('./images/blog/blog20220109.jpg') center center / cover no-repeat;
	z-index:-1;
	position:fixed;
	top:0;
	left:0;
}
.page-beforefooter{
	position: relative;
	z-index: 1;
}
.page-footer{
	position: relative;
	z-index: 2;
	transform:translateZ(1px);/* 回避手段 */
}

1

2

3

4

5

6

7

8

9

10

11

12