例として、animate.cssでflipInやflipOutをかけようとして、この条件が満たされてしまうと発現する。試しに以下のようなコード体系でコーディングをしてみる。<p>上記imageに対して、animate.cssのプロパティをかけてあげるとあら不思議。class="fix-background">position:fixed;での疑似背景</div></div>上記の例だとtransform:rotate3d;のかかった「image」要素は、position:fixed;とz-index:-1;をかけた「fix-background」要素の後ろ側に隠れてしまう。animate.cssでrotate3dがかかっているためではないかと早い段階で気づいたものの・・・。relativeとz-indexをかけてもうまくはいかない。transform:rotate3d;自体が上記のコードでは、animate.cssがかかっている「image」にしか入っていないわけで・・・。こいつだけかと思いきや、translate3dとかの3D系のtransformの要素に関してはアニメーションなどの「処理」が行われると同じことが起きる。これがスマホだけで起こるというのもなんとも奇妙な話である。???こいつの特定と修正で小一時間悩んだ。調べた結果いわゆるスマホのブラウザレンダリングのGPUアクセラレーションに引っかかっているらしい。3D系のtransformが「処理」される前に、祖先要素のどこかで静的にGPUアクセラレーションを有効化させておく必要がある。要は処理する前に準備しといてくださいねーってこと。これしないと、position:fixed;の疑似背景に、いくら負のz-indexをかけようが意味がない。これに対策を施すのであれば、以下のようにコードとなる。class="fix-background">position:fixed;での疑似背景</div></div>上記では静的なtransform:translate3d(0,0,0);をanimate.cssを使う要素の親要素にかけている。transform:translate3d(0,0,0);といいつつ、GPUアクセラレーションを有効化させられるCSSプロパティならperspectiveでも何でもいいっぽい。GPUアクセラレーションの有効化をワイルドカードでかける習慣が自分にはないので遭遇した問題・・・といえばそれまでですが、備忘録として記載しておきます。カテゴリHTML/CSSこの記事のコメントコメントはないです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。