# ページ遷移すると、画面の表示が崩れる

**URL:** <https://www.nocode-faq.com/t/topic/2816>\
**Category:** bubble\
**Tags:** フロントエンド\
**Created:** [2022 年 4 月 20 日午前 7:51 UTC](https://www.nocode-faq.com/t/topic/2816 "2022-04-20T07:51:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Turtle01](https://avatars.discourse-cdn.com/v4/letter/t/96bed5/32.png) [@Turtle01](https://www.nocode-faq.com/u/Turtle01)\
**Post date:** [2022 年 4 月 20 日午前 7:51 UTC](https://www.nocode-faq.com/t/topic/2816/1 "2022-04-20T07:51:51Z")

</div>

forumで見つからなかったため質問いたします。

ページ遷移をした際に30~40%の確率で遷移先ページの表示が崩れてしまいます。  
この現象はリロードすると直ります。

例：[Screenshot - 7f04e01a9e05df814b48bf7c688c0231 - Gyazo](https://gyazo.com/7f04e01a9e05df814b48bf7c688c0231)  
メニューとヘッダーreusable elementは潰れ、中央のエレメントは若干左側に押されています

本来表示させたいページ：[Screenshot - f00a33d0757764541a7b4f58a6c851de - Gyazo](https://gyazo.com/f00a33d0757764541a7b4f58a6c851de)

メニューと通常のページ遷移は「go to the page」のワークフロー1つで構成されているため  
ワークフローが悪さをすることは考えられなさそうです。

> **[Gyazo](https://gyazo.com/636c3bd06088b40e35086aa2f50853db)**
>
> Easily capture screenshots, GIFs, and replays that are ready to share. Download the free app for windows and mac.

ヘッダーにはフラグがyesになった時だけオーディオを流すようにはしていますが、  
ページが崩れる時には動いていないので違うっぽいです。

> **[Gyazo](https://gyazo.com/d958762559b381c840d6945bd3c76b5b)**
>
> Easily capture screenshots, GIFs, and replays that are ready to share. Download the free app for windows and mac.

現状考えられる原因が他に思いつかないのですが、何か他に考えられる原因はありますでしょうか・・？

---

<div class="post-metadata">

**Author:** ![jansnap](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/jansnap/32/6599_2.png) [@jansnap](https://www.nocode-faq.com/u/jansnap)\
**Post date:** [2022 年 4 月 20 日午前 9:16 UTC](https://www.nocode-faq.com/t/topic/2816/2 "2022-04-20T09:16:17Z")

</div>

エレメント構成が分からないので外しているかもしれませんが、  
タイミングによっては再現せず、リロードすると直るということは、読み込み完了前に表示しようとしているのかも知れません。  
プラグインやJavaScriptで表示したり、Page is loadedのタイミングで表示を切り替えているのでしょうか？

---

<div class="post-metadata">

**Author:** ![Turtle01](https://avatars.discourse-cdn.com/v4/letter/t/96bed5/32.png) [@Turtle01](https://www.nocode-faq.com/u/Turtle01)\
**Post date:** [2022 年 4 月 20 日午後 1:21 UTC](https://www.nocode-faq.com/t/topic/2816/3 "2022-04-20T13:21:24Z")

</div>

ご返信ありがとうございます！

なるほど、  
ちなみに読み込み前に表示させてしまう挙動というのは「go to the page」  
にも当てはまるのでしょうか・・？

現状、page is loadなどの動作は入れていないので・・。

---

<div class="post-metadata">

**Author:** ![jansnap](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/jansnap/32/6599_2.png) [@jansnap](https://www.nocode-faq.com/u/jansnap)\
**Post date:** [2022 年 4 月 21 日午前 1:10 UTC](https://www.nocode-faq.com/t/topic/2816/4 "2022-04-21T01:10:17Z")

</div>

どこから遷移してくるかは関係ないと思います。  
うーん、page is loadedなど使っていないとなると、謎ですね。。。

他に何か思いつく方はいらっしゃいませんか？💦

---

<div class="post-metadata">

**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\
**Post date:** [2022 年 4 月 21 日午前 7:42 UTC](https://www.nocode-faq.com/t/topic/2816/5 "2022-04-21T07:42:14Z")

</div>

jansnapさんの仮説の通り、読み込み前に表示されているのではないかと思います。

RepeatingGroup内の情報が多すぎたり、Do a seach for…でDB情報を全て検索していたりすると  
情報量が多すぎて、順番に表示され、レイアウト崩れが発生する可能性があります。

Pluginの「Page loaded（entire）」を使い、RG内の情報の読み込みが完了してから  
表示するように設定してみてはいかがでしょうか。  
【参考記事】

> **[【Bubble】ページ読込み完了まで、ロード中アニメーションを流す方法｜あぽと≪NoCodeエンジニア≫](https://note.com/apopopo/n/nfdc133ca0bfa)**
>
> Webページを表示する時、Bubbleで構築したそのままでは、読み込んだ情報から順に表示されていきます。 まずテキスト、次にボタン、最後にデータ量の大きな画像…と。 これではやや不格好ですね。 情報が全て読み込まれてから、同時にバン！と表示する。 そして読込み中は、ロード中と分かるようにアニメーションを流す。 今回はその方法を解説します。 Page loaded（entire）を活用 WorkflowやConditionalの条件式に、Page...

以前に新エディタにてPage loadedプラグインがうまく作動しないという声もありましたが  
以下のFAQにて解決しておりますので、参考までに

> [@page is loaded(entire)がyesにならない](https://www.nocode-faq.com/t/topic/2751):
>
> ・やりたいこと あぽとさんの記事([https://note.com/apopopo/n/nfdc133ca0bfa](https://note.com/apopopo/n/nfdc133ca0bfa))を参考に、ページが読み込み中のときのアニメーションを流そうと考えています。 ・問題 なぜかpage is loaded(entire)がyesにならないことがあります。 色々試したところ、repeating group が絡むとyesにならない気がしました。 エディタはこち…

---

<div class="post-metadata">

**Author:** ![Turtle01](https://avatars.discourse-cdn.com/v4/letter/t/96bed5/32.png) [@Turtle01](https://www.nocode-faq.com/u/Turtle01)\
**Post date:** [2022 年 4 月 28 日午後 12:22 UTC](https://www.nocode-faq.com/t/topic/2816/6 "2022-04-28T12:22:53Z")

</div>

返信遅くなりました💦  
どうやら読み込み前に表示されているようで、  
「Page loaded（entire）」  
これを試したところ崩れなくなりました‼‼

お二人ともありがとうございます(\_\_)