兵庫県三田市でホームページ製作をしているゴリラドットです。

アイフォンのcssバグ…、ちょっともうイヤになってきちゃうレベルでひどいんですよね。往年のインターネットエクスプローラー（IE）かな？というくらいヒドい。

売れてるから殿様商売なんだと思いますが、いっそアイフォン廃れてほしい…、というくらいWEBデザインに携わっている人からすると悪評だと思います。

 

今回のアイフォンのバグは「position:fixed」した要素とそれに重なる「position:absolute」を指定した要素などのz-indexがうまく効かない、というバグです。

ちなみに現時点で出てるアイフォン13だとこのバグは発生せず、アイフォンSEだと発生しました。バグだとわかってるなら過去機種も対応してほしいものです。はぁ…。

 

バグの詳細

position:fixedした要素を下に回り込ませるために「z-index:-1」を設定する方法（そもそもこの方法自体がアイフォン、というかサファリが「background-attachment:fixed」に対応してないから仕方なくしてる処理なんですが、その先の「position:fixed」にもバグがあるという…エグいですiOS）がよく用いられると思います。

んで例えばこのposition:fixedした要素の上に、ほかの要素を載せたい場合にz-index:-1とか設定してマイナス方向での重ね合わせをコントロールすると思います。

 

イメージ図

  • 「③position:fixed & z-index:-2」君が最背面
  • 「②position:absolute & z-index:-1」君が真ん中
  • 「①z-index:設定なし」君が一番前

 

んでこの時、アイフォンSEに入ってるサファリ（すみません、ぼくの実機ではなかったのでサファリのバージョンが分かりません。あと複数の人に見てもらいましたが過去のアイフォンだと、アイフォンSEに限らずこのバグが出てました）以外のブラウザならちゃんとイメージ図通りに表示されるんですが、アイフォンSEとか過去機種のアイフォンだとこういう表示になります。

 

  • 「②position:absolute & z-index:-1」君がなぜか一番背面に
  • 「③position:fixed & z-index:-2」
  • 「①z-index:設定なし」

 

なんていうかposition:fixedを指定した要素だけ別枠扱いになってるんですよね、アイフォンSEとか昔のアイフォンに入ってるサファリは。

 

解決方法

よーく考えると「②position:absolute & z-index:-1」君はz-indexなくてもいいじゃん、なければ勝手に「③position:fixed & z-index:-2」君の上に来るんだから。という事に気づき、

 

「②position:absolute & z-index:-1」

↓

「②position:absolute」

 

にして、「③position:fixed & z-index:-2」君のz-indexも-2である必要がなくなったんで-1にして解決できます。

 

……

 

…

 

でもアイフォンマジでやだなー。アイフォン13でしれっと直すならほかのサファリブラウザもアップデートしてほしい…。んでもっというとこの不具合の起点である「background-attachment:fixed」に対応してほしい…。

 

まとめ

アイフォンSE（と過去機種のアイフォン、アイフォン13除く）で発生する不具合、「position:fixed」を指定した要素のz-indexが意図したとおりに効かない問題を紹介しました。

うーん、アイフォンなー…。