css3,transform: translate3dでのちらつきと、重なり順のバグ表示

アニメーションをつくっていたら、最後の方でちょこっとチラついたり、zIndexがおかしくなってみえなくなったりすることが有りました。

結果からいうと、以下で解決。

@keyframes animename
from
transform: translate3d(0,20%,0)
to
transform : none;　× これを、→ translate3d(0,0,0) に修正


具体的ところでは、要素の書く順番で、普通はBが上に来る。

animeA,animeB{
    position: absolute;
}
~~
<div id="animeA"></div>
<div id="animeB"></div>

けどアニメーションの途中などで以下のスタイルの状態になると、瞬間的にAが上に重なる。

animeA{
    transform: translate3d(0, 0,0);
}
animeB{
    transform: none;
}
~~

これは、translate3dを使った場合に CPUでなくGPUレンダリングが利用され、その描画レイヤーが通常のCPUレンダリングの上に来てしまうらしい。

高速化と確実性の両立がベストだけど高パフォーマンスをだすためにいろいろ頑張っているそのすきまなのかもしれなない。