Chrome renders page twice while Safari works as expected

Question

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.

score 3 · Accepted Answer · answered May 09 '19 at 13:00

3

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.

answered May 09 '19 at 13:00

Greg Burghardt

17,900
9
49
92

Thanks, that is the problem. Now I need to figure out how solve it as I have no means of knowing in which sequence the CSS files are loaded. – Ymox May 09 '19 at 17:04
Just include bootstrap.css normally with a `` tag or using the `@import` directive in another style sheet. – Greg Burghardt May 09 '19 at 19:59
I think there should be any better solution, @GregBurghardt. Because that way we need to kind of throw webpack away and get back to asset pipeline. – Diego Stiehl Oct 10 '19 at 01:03
@DiegoStiehl: This is really a browser issue, unfortunately. – Greg Burghardt Oct 10 '19 at 11:33

Diego Stiehl · Answer 2 · 2022-03-09T22:26:40.463

1

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).

edited Mar 09 '22 at 22:26

answered Oct 10 '19 at 01:37

Diego Stiehl

403
8
25

score 1 · Answer 3 · answered Feb 08 '22 at 14:16

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

Chrome renders page twice while Safari works as expected

3 Answers3

What didn't work:

What did work:

Reference