OS 4.1以降のAndroidで、hardwareAcceleratedが有効時にHTMLCanvasが２重化して表示される不具合。 OS 4.2.0以前に有効な対策（hardwareAcceleratedを無効化）
またアニメーション... ボタンなどのUIにGPUアクセラレーションが効いたアニメーションをつけたとき、iOSにおいてはiPhone4か4SのWebViewあたり、Androidにおいては….まぁ機種依存的(げんなり)に、アニメーションの立ち上がりが遅いことがあります。 その辺を調査していたところ、position: relativeの指定による、意図しないレイヤー生成＆GPUアクセラレーション巻き込みによって、何かしら合成レイヤー周りでオーバーヘッドが発生してしまっているんではないかな、という憶測に行き着いた次第。今回はその辺りを見ていきます。 GPUアクセラレーションが効いたアニメーションは、CSS Animations、CSS Transitionsのほか、特殊なプロパティ（transform3d: scale(1,1)とか）で強制的にGPUアクセラレーションを効かせたCanvasア
何かと不透明なあたり 気がつけば一ヶ月ほどブログを更新していませんでした。リハビリ記事です。 今回は、GPUを効かせる == それに関連するプロパティ（ただしOSやバージョンによって何がトリガかは厳密に異なる）を適用したら挙動が改善した、というようなノリの体験TIPSをゆるくまとめました。 このあたりの振る舞いについては、描画パフォーマンスの問題として、それなりに明らかになってきているように思います。WebKitのレンダリングプロセスにはじまり、GPU命令のサポートが受けられるのはどんな操作だとか、GPUへ処理が預けられるレイヤーの生成がどーとか、最近よく見聞きします。 自分が業務で扱っているスマートフォン向けのWebサービスでは、このような描画パフォーマンスの問題は、スクロールパフォーマンスと合わせて非常にクリティカルです。この辺りについてのロジカルなまとめは、某氏が近日中にまとめるらし
JavaScriptios-gpu iPadで上のページを見ると、各Oの字が異なって見える。3dのスタイルは、scale3d(1, 1, 1)とtranslate3d(0, 0, 0)で効果を無くしてる。ちょっと滑らかで、細く見える。 画面内のGPUで描画している特定の要素に変更を加えると、全く異なる位置にあるGPUを使っていなくてz-indexの低い要素(具体的には画面上部のツールバー)がチラつくという現象が出た。translate3d(0, 0, 0)を設定し、そちらもGPU描画に切り替えて回避した。 GPUは切り替わるときにチラつきが発生したり、1万ピクセル四方以上あたりの要素で描画が切れたり、通常とは違う挙動がいろいろある。
Ememo 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でアニメーションさせてもあまり綺麗には動きません。でもゲームのようなものだとやっぱり綺麗にアニメーションさせたい。でも・・というジレンマ。 そこで今回の手法を使うと、レンダリング周りが改善されるかもしれない、というメモ。 この方法は、どこかのバグリストで書いてあ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く