CSS未適用ページが一瞬表示される問題
RailsでのCSS読み込みについて質問させて頂きます。
現在、ページに対しリダイレクト処理がかかった際に
一瞬CSS未適用状態のページが表示されております。(FOUC)
F5キー等による更新処理時、初回表示時には発生はしておりません。
お手数ですが、原因が分かる方がおりましたら解決策をお願い致します。
■ 発生ブラウザ
IE: 発生
Firefox: 発生
Chrome: 発生
■ 現状の実装は以下のようになっております。
app/controllers/books_controller.rb
def index
@books = Book.all
end
app/views/layouts/application.html.slim
DOCTYPE
html
head
== render 'layouts/asset'
title
body
== render 'layouts/header'
.container
- flash.each do |key, value|
= content_tag :div, value, class: "alert alert-#{key}"
.row
.col-md-offset-2.col-md-8
== yield
app/views/layouts/_asset.html.slim
=stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
=javascript_include_tag 'application', 'data-turbolinks-track' => true
=csrf_meta_tags
app/views/layouts/_header.html.slim
= navbar id: 'header' do
= vertical do
= link_to 'Top', root_path #FOUC発生
= horizontal do
= nav class: 'navbar-right' do
= link_to '書籍一覧', books_path #FOUC発生
= link_to 'ログアウト', destroy_user_session_path, method: :delete #FOUC発生
app/assets/stylesheets/application.scss
@import 'bootstrap';
@import 'bootstrap-sprockets';
@import 'font-awesome';
@import 'select2';
@import 'select2-bootstrap';