CODEWITHSUNDEEP
ruby-on-railsfouc
HPDelete
HPDelete

Reputation: 29

Rails - Flash of Unstyled Content (FOUC)

I get a flash of my top navbar at the side of the page, in between pages. Being a new programmer, I was looking for a simple solution, and tried inserting the solution from How do I eliminate FOUC with Ruby on Rails? into my app/views/layouts/application.html.haml file, so now the header portion of that file looks like:

!!! 5
%html
%head
%title Title
= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
%link{:rel => "stylesheet", :href =>  "//opensource.keycdn.com/fontawesome/4.6.1/font-awesome.min.css"}/
= csrf_meta_tags
:css
    .fouc { display:none; }
:javascript
    try {
        var html=document.getElementByName("html");
        document.addEventListener("DOMContentLoaded", function(event) { html.class=""; });
                html.class="fouc";
        } catch() {}

But this did not fix the problem. Can anyone put me onto the right track? (In my research, it seemed other solutions were criticized for not working in all circumstances.) This really destroys an otherwise great project - I hope someone can help!

Edit: FOUC is happening on Chrome but not on MS-Edge.

Upvotes: 2

Views: 650

Answers (0)

Related Questions