'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 [email protected] 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 1:^[1]

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.

Solution 2:^[2]

What didn't work:

Doing it this way had the flash of unstyled content.

// app/javascript/styles/application.js
import("bootstrap/dist/css/bootstrap");

What did work:

// app/javascript/styles/application.js
import 'styles/site'

// app/javascript/styles/site.scss
@import "bootstrap/dist/css/bootstrap";

in config/webpacker.yml

 extract_css: true

Reference

This took a little trial and error.

@DiegoStiehl's answer was helpful
This answer to a related problem says to create at least one css file and import it, so I tried that (the bootstrap file, but presumably you could use any)
This article showed me how to do that

Solution 3:^[3]

In compliment to Greg Burghardt's response and to help people who will land here I want to add two tips that helped me.

Verify if you are using stylesheet_pack_tag instead of (or next to) stylesheet_link_tag inside your application.html.erb.
Set extract_css: true at config/webpacker.yml (source).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Greg Burghardt
Solution 2	stevec
Solution 3

'Chrome renders page twice while Safari works as expected

Solution 1:[1]

Solution 2:[2]