スクロールすると画面が崩壊する。

抱えている問題

ある状況において、画面が崩壊します。どう説明してよいのか分からないので、崩壊という言葉を用いました。

下記が実際の画面のスクリーンショットです。

backgroundを白に設定してるので、少し伝わりずらくなってしまっているのですが、ある場所を境に画面白くなります。

例えば2枚目の黒い画像は見切れていますが、正しくレンダリングされた場合は下記のように映ります。

###試してみたこと、考えてみたこと

原因を探っていくとreactのsetStateでstateの値を書き換えた後、画面をスクロールすると、画面が見切れることが分かりました。

ただし、firefoxやoperaなどでは正しくレンダリングが行われ、画面が見切れてしまうのはgoogle choromeということも分かりました。

setStateでstateの値を書き換えること正常に行われ、consoleにエラー等の表記は出ません。

また、デベロッパーツールでモバイルサイズの画面に切り替えるとレンダリングは正しく行われます。

画面が見切れてしまうのはCSSと関係があるのかもしれません。

質問

問題解決に繋がる可能性がある検索ワードやヒントを教えて欲しいです。。。！

追加文

コンソールにエラーが表記されることはない等のことがあり、どこが原因となっているのか検討がつきません。

なのでソースコードを貼ろうとすると、HTML、CSS、js全てのソースコードを貼ることになります。それは質問の読み手側の大きな負担になると思い、あえてソースコードは書きませんでした。

なので「もしかしたらこれが原因かもしれない～でも間違ってるかも～」くらいの、結構アバウトな回答で構いません。。。！

思い当たる節などがもしあれば教えて欲しいです。！

hoshi-takanori

2020/03/05 15:43

ソースがないと何も分かりません。

chiba_kun

2020/03/05 17:38

どこが原因となっているとはっきりと分かればよいのですが、原因となっている箇所の検討があまりつきませんでした。ソースコードを省略せずに貼ろうとすると、行数が大変長くなり、質問の読み手側にとって負担になりそうだったので、あえて書きませんでした。ソースコードがなく質問を投稿したので、「もしかしたらこれが原因かも～でもよくわからんから間違ってるかも～」くらいの回答がきたらいいなと思っていました。。でも、たしかに雑な質問ですね。編集しておきます！

hoshi-takanori

2020/03/05 18:01

他の人は知りませんが、自分としては全部のコードを貼ってもらった方が、そのままコピペで動かせるので負担は大幅に減ります。部分的なコードだと、足りない部分をこっちで補わないと動かして検証できないので。もちろん問題の箇所が分かってればそこだけ見ればいいのですが…。