またアニメーション... ボタンなどのUIにGPUアクセラレーションが効いたアニメーションをつけたとき、iOSにおいてはiPhone4か4SのWebViewあたり、Androidにおいては….まぁ機種依存的(げんなり)に、アニメーションの立ち上がりが遅いことがあります。 その辺を調査していたところ、position: relativeの指定による、意図しないレイヤー生成&GPUアクセラレーション巻き込みによって、何かしら合成レイヤー周りでオーバーヘッドが発生してしまっているんではないかな、という憶測に行き着いた次第。今回はその辺りを見ていきます。 GPUアクセラレーションが効いたアニメーションは、CSS Animations、CSS Transitionsのほか、特殊なプロパティ(transform3d: scale(1,1)とか)で強制的にGPUアクセラレーションを効かせたCanvasア
![GPUアクセラレーションとposition: relativeによるレイヤー生成について](https://cdn-ak-scissors.b.st-hatena.com/image/square/00d0187ed988b9d572f07efcf256b832ac481f8b/height=288;version=1;width=512/http%3A%2F%2Ffarm9.staticflickr.com%2F8394%2F8631933677_bdbb175918_n.jpg)