CSS3アニメーションでハマったこと。

itinao 10:00 0 件のコメント
筆者が以前担当していたWebviewを使ったスマホアプリの案件で、CSS3でFlashバリのアニメーションを作る。
ということをやったので、その時にハマったことを書いていきたいと思います。

既存のFlashアニメーションをスマホでも表現したいと言われたのが背景です。
ツールとかは使わず、独自に書いていくスタイルでした。（１人でやってた。

どんな案件？

下記をサポートしたWebviewアプリ。
Android2.3系
Android4.x系
iosのいくつか忘れた

ハマったポイント

再現機種現象原因 / 対策
Gylaxy S
XperiaAcroHD
(Android2.3系)		border-radiusを指定しても、角丸が再現できない。特定のAndroid端末では、border-radiusで％(パーセント)指定ができない。
bordera-radiusをpx指定にする。
Android2.3系animation-fill-modeプロパティを指定していても、アニメーション後の表示を維持することができない。(forwards)サポートしていないプロパティだった。
筆者は、予めアニメーション終了後のプロパティを指定しておくことで回避した。
Android2.3系-webkit-filterを指定しても、画像にエフェクトがかからない。サポートしていないプロパティだった。
エフェクトのかかった画像にするなどして、使わないようにする。
Gylaxy S3
一部Android?		アニメーション中、画像がちらつく。-webkit-backface-visibility:hiddenを指定すると収まる。
要素全体を囲むと別の要因を引き起こすこともあるので、使うときは要注意。
Gylaxy S
XperiaAcroHD
(Android2.3系)		-webkit-transform:scale
で要素が拡大できない。		-webkit-backface-visibility:hiddenを指定していることが原因だった。
拡大したい要素には指定しないようにする。
Android2.3系一気に複数のアニメーションをスタートさせるとカクつく・アニメーションが変な動きをするそもそも、一気に複数のアニメーションをスタートさせないように作る。
どうしてもっていう場合は、keyframeの0%〜50%を動作させない・0.5秒後からアニメーション実行させるなど遅延実行にすると大丈夫だった。
iOS6？z-indexが効かない。親要素でもz-indexを指定してあげることで効くようになった。
Android2.3系overflow:scrollが効かない。CSSでスクロールできないのでJSを使ってスクロールさせる必要がある。
Android2.3系モーダル時、下部の要素のイベントが発火してしまう。上の要素のタップイベントを通り越して下の要素のタップイベントが発火する。
jsで、e.preventDefault()でイベントをキャンセルさせる。
Android4.0x系jsでクラスを置き換えても、表示が切り替わらないことがある。再レンダリングが走らない？
原因分からず。
Android2.3系アニメーションを0%、100% のみで指定すると、アニメーション中に他要素のtransformが効かなくなることがある。keyframesを指定を0%と100%のみにすると、他の要素のtransformプロパティが効かなくなる。
対策としては、0%と50%と100%を指定する。（間に1つ挟むと大丈夫だった。

この他にも色々ありましたが、曖昧なものも混ざってるため記述しません。

また、他のサイトでも色々報告があがっていたので参考になりました。
・AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
http://blog.webcreativepark.net/2012/03/13-093853.html
・[css, css3, html] スマｰﾄフォン(iPhone, Android)ブラウザのバグまとめ
http://tenderfeel.xsrv.jp/css/1177/

終わりに

完全に、工数に見合わない作業でした。
Android2.3系だとAdobe EdgeとかSenchaAnimatorとかでもキレイに動かないし。。

実装時は、Android2.3系から確認して書いていくのが正。
いや、Android2.3系はサポート対象外にするのが正。
そうすると、みんな幸せに。。

以上！

0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )