[B! android][css3] yhmtのブックマーク

描画とかGPUアクセラレーションの怪 (モバイル編)

何かと不透明なあたり気がつけば一ヶ月ほどブログを更新していませんでした。リハビリ記事です。今回は、GPUを効かせる == それに関連するプロパティ（ただしOSやバージョンによって何がトリガかは厳密に異なる）を適用したら挙動が改善した、というようなノリの体験TIPSをゆるくまとめました。このあたりの振る舞いについては、描画パフォーマンスの問題として、それなりに明らかになってきているように思います。WebKitのレンダリングプロセスにはじまり、GPU命令のサポートが受けられるのはどんな操作だとか、GPUへ処理が預けられるレイヤーの生成がどーとか、最近よく見聞きします。自分が業務で扱っているスマートフォン向けのWebサービスでは、このような描画パフォーマンスの問題は、スクロールパフォーマンスと合わせて非常にクリティカルです。この辺りについてのロジカルなまとめは、某氏が近日中にまとめるらし

yhmt 2013/03/21

リンク

[CSS3] Androidのmask-imageに関する不具合について

CSS Programming Advent Calendar 2012の20日目の記事でCSS Maskingについて書きました。その中でAndroidには不具合があるんだよね…っていうのを最後の方で紹介したとき、参考としてリンクしていたのは@mattari_pandaさんが書いた Android4でmask-imageとアニメーションを同時に設定するとマスクしなくなるというデモでした。でもよく調べてみたらそれだけじゃなかったんです。検証するにあたって書いたデモはこれです。以下の内容はReadmeと一部被ります。 Androidでの症状 mask-imageとanimationを同時に設定するとマスクしなくなる(Android4のみ) 症状が出るのは３つ目のドロイド君です。 mask-imageとanimationを同時に設定した場合はアニメーション対象のプロパティに関係なく

yhmt 2013/01/10

リンク

Androidのレンダリングでハマったので対応策を書いてみる

Em emo This is a tumblelog, kinda like a blog but with short-form, mixed-media posts with stuff I like. Scroll down a bit to start reading, or a bit more to read more about me. まぁ大したことはしていないのだけど。 * { -webkit-backface-visibility: hidden; }を追加しただけ。 Androidはレンダリング周りが弱く、CSSでアニメーションさせてもあまり綺麗には動きません。でもゲームのようなものだとやっぱり綺麗にアニメーションさせたい。でも・・というジレンマ。そこで今回の手法を使うと、レンダリング周りが改善されるかもしれない、というメモ。この方法は、どこかのバグリストで書いてあ

yhmt 2012/03/14

リンク

Android 2.2の不具合 - makogの日記

スマートフォン対応サイトにて、Galaxyで<input>にfocusをあてると、ウィンドウが変にスクロールしてしまうという問題が報告された。いろいろ調べてみると、Android 2.2 では対応していないCSS3 Animationの指定をすると誤動作する、ということらしい。 jQTouchの場合 http://code.google.com/p/jqtouch/issues/detail?id=398 下記のようにCSSをデフォルト値で上書きすると症状がおさまる。ただし、iOSや2.2以外のAndroidにも影響を与えてしまう（画面遷移の際に点滅したりする）ので、UAで判定をかけてAndroid 2.2の場合だけ以下の指定になるように改造する必要がありそうだ。 body { -webkit-perspective: none; -webkit-transf orm-style: fla