TECH BOX

Technology blog from Web Engineer

この記事は最終更新日から4年以上経過しているため正確ではないかもしれません

iOSでfixed/absolute切り替え時のバグ対応

モバイルサイトのマークアップをする際に、ある位置を超えるとヘッダーなどの要素を固定するという仕様はよくあると思います。
その際にpositionのabsoluteとfixedを切り替えて使うと思いますが、iOSの仕様でスクロール中はz-indexの値が無視されるバグが存在しています。

そのせいで、positionの値を切り替える一瞬z−indexが無視されて一度消えたようになります。
これを解消する方法として、切り替えたい要素をGPUレンダリングに変えるという手があります。

.elem {
  transform: translateZ(0);  // もしくはtranslate3d(0,0,0)
  position: absolute;
}

.elem.fixed {
  position: fixed;
}

transform: translateZ(0);もしくはtransform: translate3d(0,0,0)にすることでGPUレンダリングとなるので一瞬消える現象を解消することができます。

この現象はiOS9/iOS10両方で発生することを確認しています(2017年1月現在)。