chromeブラウザでReflowがCSSアニメーションと相性悪いようで、余計なアニメーションが走ってしまうことがある。
画面内容
画面遷移が発生する時に、次のように遷移先の画面が右側から左に移動するようCSSアニメーションが実装されている。
&SlideFromRight-enter,
&SlideFromRight-appear {
left: 100%;
transition: all 300ms cubic-bezier(.165, .84, .44, 1);
pointer-events: none;
opacity: 0;
&-active {
left: 0;
opacity: 1;
}
}
&SlideFromRight-exit {
left: 0;
transition: all 300ms cubic-bezier(.165, .84, .44, 1);
pointer-events: none;
opacity: 1;
&-active {
left: -100%;
opacity: 0;
}
}
問題点
低スペックのandroid端末で、偶に真白な画面が描画されてしまって、アニメーションが止まってしまったように見える。
調査
React.ComponentのcomponentDidMountでwindow.innerHeightなどをアクセスしている為、Reflowが発生してしまう。その時、余計なアニメーションが走っていることがわかる。
window.innerHeightをアクセスする処理を削除すると、余計なアニメーションがなくなり、真白画面もなくなる。
対応
Reflowを発生させる上記処理をsetTimeoutで遅延することで、余計なアニメーションがなくなる。