chromeのinactiveタブの描画問題

概要

chromeでinactiveタブにJS処理を実行して描画する時に、うまくレンダリングされないことがある。

内容

1. タブAでボタンをクリックすると、新たなタブBを開く
2. タブBである処理が終わったらタグ間通信でタブAに通知する
3. タブAでタブBでの処理完了を受信したら、タブA画面の検索結果一覧を再描画する
4. ユーザがタブBで閉じるボタンをクリックしたら、タブBのウインドウを閉めてタブAの画面に戻す
5. タブAの検索結果一覧（ReactList）をスクロールしても、本来のスクロールイベントが発生しないため、問題が発覚する

環境

OS:MacOS High Sierra V10.13.6
Chrome： V76.0.3809.100

原因

Chromeが裏タグのレンダリングは普段と違って何かあるではないかと推測される

対策

原因がはっきりと分からないので、タブAの再レンダリング処理の実行タイミングをactiveになる時(focusイベント)に変更する。