Pageload White Flash

Hello,

Sorry you’re experiencing an unexpected behavior. The general rule with the Bug category is as follow:

  1. If you’re not sure it’s a bug, and want confirmation from the community, please go ahead and post here
  2. If you’re 100% sure this is a bug, because you see a message ‘We’ve hit a temporary bug’ or if an action never ends, go straight to our Bug Report Form, it’s a better way to tell us about the issue so that w can fix it.

Sorry about the bug!

I’m using a dark theme on my web app. I noticed everytime I change the page I get a flash of white. It’s coming from the body background. Is there a way to change the body background so I’m not blinded everytime I change the page?

Use css in the header of the page to change the body background color.

body { background-color: lightblue; }

This didn’t help, the flash of white is still showing when I change the page.

Screen Shot 2020-09-20 at 4.51.17 PM

You need to put that between style tags.

How is that done?

This didn’t work``

<style>
#page {
background-color: #000;
}
</style>

This either

<style>
body {
background-color: #000;
}
</style>

This didn’t work either

<style>
body {
  background-color: black;
}
</style>

Can someone please explain why there is a flash of white when I change the page and how to fix it.

Any suggestions?

What bubble plan are you on?

I just checked, the code in Page HTML Header only works on a paid plan.
image

Explanation is that Bubble is rendering the body of the page and then setting the background color defined in your property panel and that causes a delay in a few milliseconds. The solution is to define the background color of the body before it’s rendered using css in the page header. Unfortunately it’s my understanding that Bubble does not allow you to config the page header on a free plan.

1 Like

This topic was automatically closed after 14 days. New replies are no longer allowed.