flipsnap.jsを使っています。
flipsnap.jsとは、リスト項目をフリック操作でスクロールさせ、項目でスナップするような動作を実現するjsライブラリです。
どの端末でも比較的安定して動作するとのことで評判いいですね。
問題発生
しばらくして開発が進むと、flipsnapを使っているリストが表示されない場合がある、という不具合が発生しました。
画面遷移時表示されない、リストをタップすると表示されたりされなかったり、スクロールさせると表示されるようになったり、謎の現象です(iPhone4以上,iOS6.0以上)。
画面の構成が複雑になり、リスト自体もいろいろなスタイルのものが要件として増えたので、リストに当てるcssスタイルが少しずつ変わり、それが変に影響し合っているのかと考えました。
cssスタイルを見るときはWebインスペクターを使いますが、プロパティのチェックボックスを単に外してまたつけるだけでなぜか表示されるようになったり。。。決定的な原因は掴めずにいました。
対策
何かいい方法はないか調べていたところ、描画周りはどうやら translate3d が怪しいことが分かりました。flipsnapにオプションで disable3d があるので、trueを渡してtranslate3dではなくtranslateの方を使うようにします。
var flipsnap = Flipsnap('.flipsnap', {disable3d: true});
これで無事表示はされるようになりました。このオプションはブラウザのバグ等で3dが使えないとき指定するようにとドキュメントにありますね。
しかし、3dが効かなくなったことでスクロールの動作が重くなってしまいました。
そこで外側の要素(.viewport)の方で効かせるようにしました(本家サイトにOptionalとして書いてあるのと同じような意味です)。
jQuery('.viewport').css({'-webkit-transform': 'translate3d(0,0,0)'});
これでスクロール動作を維持しつつ表示を安定させることができました。
x値などプロパティを変更する設定系と、3dを効かせるか否かの描画系とを分けて扱うことがポイントですね。