iOS 9 Safariメモリ表示領域外のコンテンツが消える!?

iOS 9 Safariでバグ?にぶち当たりました。その内容と、解決策についてメモ。

3行でまとめると…

  1. 画面表示領域外にはみ出たレイヤーのコンテンツがメモリ上から消える
  2. 対象のレイヤーの親要素にposition: fixedをあてる
  3. …。2行で足りた!!

バグ?について

css animationを使って画面を端から端まで横断するようなアニメーションを実装中、ループすると要素が消えました…。DOM上は要素が存在し、touch系のイベントなどは正常に拾えているが、コンテンツが表示されない。

端末をMac Safariに繋ぎ調べてみると、Layer > info > Memory が 0 Bになっている。どうやら表示領域外に出た時点でメモリが開放される事があるもよう。

解決策

どうググっても同じ現象に当たった回答が得られず…
似たようなiOS 9で発生するCSSアニメーションの問題について試しているうちに、たまたま発見しました。

問題のアニメーション要素をposition: fixedをあてた要素で囲ってやるとコンテンツがクリアされなくなりました。

さんぷる

※ 要 iOS 9 Safari

バグるアニメーション

http://jsbin.com/noratu JS Bin on jsbin.com

バグらないアニメーション

http://jsbin.com/fewami JS Bin on jsbin.com

以上、バグでした。

SHOTA

I'm WEB developer

Tokyo, Japan http://senta.me/