うえるかむとぅあんだぁぐらうんど

世の中わからないことだらけだ.少し確かなことは検証をしたことだけ

iOS9でのfixedなelementの扱いがおかしい(bug?)

この問題はiOS10にて解決いたしました。

今日Javascriptを書いていた時にiOS9で処理が遅延するelementがいたので、記事に起こしてみた。

見ていただいたほうが早いと思うので、githubpagesでサンプルを公開してみた

検証コードは末尾にあります。

this is fixed と this is absolute は同じクラス名で同じループ処理(forEach)です。

Gifアニメによる再現

hoge

キャプチャによる再現

下までスクロールし指を離さず上に上がってきてください。

描画後

IMG_8268 真っ白である。 スクロールしていくと

スクロール時

いくつかのelementが現れる。   IMG_4275

display noneになる

特定位置までいくと検証用のelementが display:noneで消される IMG_8727

上にスクロールする

absoluteなelementはみえるが、fixedなelementは見えない

※この時に指を離さずに動かす IMG_3647

指を離す

指を離すとfixedなelementが表示される IMG_4275

再現環境

この問題が再現できたのは実機にてiOS9のiPhone6 Plus及びiOS9.1 iPhone6sだけでiOS8のiPhoneやAndroid等その他の環境では確認できなかった。

PCブラウザでも確認できるようスクロールイベントも入れてあるので是非確認して欲しい。

そしてコメントがほしい。

検証コード

elseからif に戻ってきてdisplay blockされる際の挙動がおかしい。