Jump to content

Debug Bar causes FOUC on page load


bernhard
 Share

Recommended Posts

Hey @adrian this is a small issue but it gets annoying here while working on a new frontend as I see it on every page reload ? 

This is my layout:

F3GJyNq.png

The blue border shows where the <body> is. I'm using a dark gray background for <html> and white background for <body> to make sure that the footer (the part where is says "Impressum / Datenschutz TBD" looks like it goes down until the page ends, but actually it ends where the blue line of the body is.

This seems to work well, the only problem I see so far is that the tracy debug bar flickers on page load. It seems to be at the bottom of <body> because I tried making the body 100% height and the flash was gone.

I also don't see it if I "disable tracy", but I still see it if I only "hide tracy" (the very right icon).

Would it be possible to hide tracy until the DOM is loaded or until the final position of the bar has been calculated?

Thx in advance!

Update: I sometimes see the white stripe even if the bar is disabled!

PS: I also tried to change my concept and make the body 100% and then make the body have gray background and make <main> have white bg, but that caused other problems with my layout so I'd prefer a solution that works with html+body ? 

Link to comment
Share on other sites

Hey @bernhard. Did you think about pushing the footer down to stick always to the bottom? That might fix issue maybe. Nowadays it is easy to accomplish. Take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers for example. If you don't want to use a wrapper, you can also use the body and set it to 100vh.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Hey @adrian I had to go back to my initial setup with filling the remaining space with the footer color due to several reasons (mainly my pagebuilder setup with different coloured sections).

On 7/13/2024 at 9:48 PM, bernhard said:

Would it be possible to hide tracy until the DOM is loaded or until the final position of the bar has been calculated?

Any chance you can have a look into this? Or just give me a hint where these things are defined ? Thx!

Link to comment
Share on other sites

@bernhard - the thing is that the loading of the Tracy bar is handled by the core Tracy package - I just call the PHP command to enable it: https://github.com/adrianbj/TracyDebugger/blob/63eae91b18b1881e0ac99f6c33930f93ba764956/TracyDebugger.module.php#L1508.

If you view the page source, you'll notice that weirdly it is added after the closing </html> - maybe that is part of the problem?

I have lots of sites with fixed footers and never seen the issue you are referring to and FOUCs are a pet peeve of mine :)

Link to comment
Share on other sites

Thx @adrian for your help. Interestingly today the error was gone!! I found out that it only appears when logged in. And then I found out that it seems to come from something else, not the debug bar. I'm quite sure it was related to tracy some time ago, so something must be different than back then. But who knows, maybe it was not related to tracy at that time as well. I'll have to investigate further...

Link to comment
Share on other sites

  • 4 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...