[SOLVED] Chrome renders page twice while Safari works as expected

Chrome renders page twice while Safari works as expected

Ruby on Rails 6.0 (RC1) renders with Bootstrap 4.3.1 correctly on Safari but seems to render the page on Chrome twice (so it appears), first without using the Bootstrap CSS information, then applies the Bootstrap formatting. For a fraction of a second I can see the page in it's "raw" format before it gets reformatted.

Chrome on Windows: same result, renders twice / flickers Edge: works correctly Firefox on Windows: misbehaves like Chrome does

With working correctly I mean it does not flicker when rendering the page.

Here is what I did.

Create a new RoR application

  rails new test600

Create a controller

  cd test600
  rails g controller main index

Install Bootstrap, JQuery and Popper

  yarn add bootstrap@4.3.1 jquery popper.js

Edit config/webpack/environment.js so it reads:

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

module.exports = environment

Edit app/javascript/packs/application.js and add

require('jquery')
require('bootstrap/dist/js/bootstrap.js')
require('bootstrap/dist/css/bootstrap.css')

Edit app/views/layouts/application.html to

<!DOCTYPE html>
<html>
  <head>
    <title>Test600WithBootstrap</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
      <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
      <nav class="my-2 my-md-0 mr-md-3">
        <a class="p-2 text-dark" href="#">Features</a>
        <a class="p-2 text-dark" href="#">Pricing</a>
      </nav>
      <a class="btn btn-outline-primary" href="#">Sign up</a>
    </div>
    <%= yield %>
  </body>
</html>

Start the application, either rails s or puma, both give the same result.

Solution

This is an issue known as Flash Of Unstyled Content (FOUC). This might be due to your require('bootstrap/dist/css/bootstrap.css') in application.js, which downloads the CSS file asynchronously while the page is loading, instead of blocking the page load while the style sheet is downloaded, and its styles are applied.