TECH BOX

Technology developer's blog

この記事は1年以上経過しています

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


2017年06月30日

モバイルサイトのマークアップをする際に、ある位置を超えるとヘッダーなどの要素を固定するという仕様はよくあると思います。
その際に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月現在)。

Write a commets