Laravel website with boostrap4 : FOUC on pages using container-fluid

Question

Building a website with Laravel5 and Bootstrap4.

I'm getting a FOUC with a brief width of my page at 1/5 of width before expanding to real width.

The reason seems to be attached to how i use container-fluid. I am using 'container-fluid' as i want to have a vertical left sidebar with content at the left of main page. On a simple page, code is as per below :

<div class="container-fluid px-0">
<div class="d-lg-flex flex-lg-row justify-content-center ">
        @yield('left_side')
    <div class="col-12 col-lg-10 col-xl-10 custom-width">
        <div class="container">
            <div class="row justify-content-center" >
                <div class="col-12">
                      <div class="card page_card" >
                         <div class="mx-auto" style="min-height: 70vh">
                           <p> example..</p>
                         </div>    
                       </div>
                </div>
            </div>
        </div>
    </div>
</div>

When removing my side-bar and using 'container' instead of container-fluid, the display is at correct width as soon as the page loads.

---

Correction

It is not about a width change. It seems briefly this is my side column which appears blank in the center with main page aligned vertically, before having the 2 pieces being put aligned horizontally

---

Addition1 - GIF of my FOUC-error

Here is an example of the FOUC:

It seems the FOUC is caused by my 'Google Ad'-div (in Yellow) i have inserted in my topbar containing my navbar. Some website have their ads appearing above the navbar so this can be done. Any clues?

<!-- for navigation and title on screen < lg -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark navbar-fixed-top d-lg-none">
    <div class="container">
        <div class="row" >
            <div class="col-2">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsMain" aria-controls="navbarsMain" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarsMain">
                    <ul class="navbar-nav mr-auto" style="width: 200px">
                        <li class="{{Request::is('/') ? 'active' : ''}} nav-item">
                            <a class="nav-link">AAA </a>
                        </li>
                        <li class="{{Request::is('sentiment') ? 'active' : ''}} nav-item">
                            <a class="nav-link" >BBB</a>
                        </li>
                        <li class="{{Request::is('exchanges') ? 'active' : ''}} nav-item">
                            <a class="nav-link" >CCC</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
<div class="top-bar d-lg-none">
    <hr class="divider-under-title mt-0 d-lg-none" />

    <div class="container">
        <div class="row justify-content-center" >
            <div class="col-12">
                <div class="top-ad d-none d-sm-block">

                    <script async defer src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                    <!--  top-ad2 when removed, FOUC disappears -->
                    <ins class="adsbygoogle"
                         style="display:block"
                         data-ad-client="ca-pub-66666"
                         data-ad-slot="44444"
                         data-ad-format="auto"
                         data-full-width-responsive="true"></ins>
                    <script async defer>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>

            </div>
            <div class="col-12">

                 <!--<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">-->
                <div class="ad_block_message_id">
                   Oh nasty adblocker. <i class="em em---1"></i>
                 </div>

            </div>
        </div>
    </div>
</div>



<!-- for market segment on screen >= lg -->
<div class="top-large-bar d-none d-lg-block">
    <!-- for Title on screen >= lg -->
    <div class="row">
        <div class="col-lg-12">
            <h1 id="title" class="d-none d-lg-block">
                <a class="deco-none" href="/">TEST</a><sup><code class="code_sup_text"></code></sup>
            </h1>
        </div>
    </div>
    <div class="container">
        <div class="row justify-content-center" >
            <div class="col-12">
                <div class="top-ad d-none d-sm-block">

                    <script async defer src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                    <!--  top-ad2 when removed, FOUC disappears -->
                    <ins class="adsbygoogle"
                         style="display:block"
                         data-ad-client="ca-pub-666666"
                         data-ad-slot="444444"
                         data-ad-format="auto"
                         data-full-width-responsive="true"></ins>
                    <script async defer>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>

            </div>
            <div class="col-12">
                 <!--<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">-->
                <div class="ad_block_message_id">
                   Oh nasty adblocker. <i class="em em---1"></i>
                 </div>
            </div>
        </div>
    </div>
</div>

<!-- for navbar on screen >= lg -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark navbar-fixed-top d-none d-lg-block mb-2">
    <div class="container">
        <a class="navbar-brand" href="/">{{ config('app.name') }}</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsMain" aria-controls="navbarsMain" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarsMain">
            <ul class="navbar-nav mr-auto">
                <li class="{{Request::is('/') ? 'active' : ''}} nav-item">
                    <a class="nav-link" >AAAA <</a>
                </li>
                <li class="{{Request::is('sentiment') ? 'active' : ''}} nav-item">
                    <a class="nav-link" >BBBBB</a>
                </li>
                <li class="{{Request::is('exchanges') ? 'active' : ''}} nav-item">
                    <a class="nav-link" >CCCCC</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

It sounds like that you have something else going on, on your site that is causing the FOUC - and that it doesn't have something to do with the styles. Your styles looks fine to me.

If it were the styles that were the problem, then it would be because the HTML was loaded before the stylesheet was loaded. So unless you have your stylesheet in the footer, then I don't think that's the problem.

My best guess is that you have some Javascript doing something to the content that is being yielded in the left-column, - and that that isn't completed when the page is loaded. If so, - then you could work your way around it by adding a placeholder in your JavaScript until the content is loaded, - or to setup a preloader on your entire site.

In order to prove/disprove this theory, you could remove all scripts from your site and just insert som standard HTML in the left-column (temporarily), to see if that is loaded without the FOUC.

---

Answer to your edit (and GIF)

Thanks for the elaboration.

The first thing I'm seeing is, that you have content for < lg content and >= lg content. I wouldn't do that. Just have it once and modify it, whenever the browser-size changes. It's easier to maintain and will get you less errors. Also (currently) you have data-target="#navbarsMain" twice.

But here's the code that is giving you problems:

<div class="container">
    <div class="row justify-content-center" >
        <div class="col-12">
            @include('inc.ad_top')  <-- when removed, FOUC disappears
        </div>
        <div class="col-12">
            @include('inc.ad_block_message')
        </div>
    </div>
</div>

I don't know what is happening in @include('inc.ad_top'). But if that is pulling some content, upon the page is loading, then that can be the root of the problem, since that content isn't pulled until after that page is loaded. And in that case, it would just display a blank col-12-container (0px height).

To debug you can change this:

        <div class="col-12">
            @include('inc.ad_top')  <-- when removed, FOUC disappears
        </div>

to this:

        <div class="col-12" style="min-width: 500px; width: 100%; min-height: 500px; height: auto; display: block; overflow: hidden;">
            @include('inc.ad_top')  <-- when removed, FOUC disappears
        </div>

... and see what that will get you.