1

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';
2
  • 具体的にどのような方法でリダイレクトを行っているのか、CSS未適用状態で表示されるのはリダイレクト先なのか、その現象はどのブラウザでも再現するのか、などを疑問に思いました。質問文にそのあたりを書いていただけませんか?
    – unarist
    Commented 2017年2月11日 14:22
  • ご指摘ありがとうございます。原因がありそうな実装部を追記致しました。 Commented 2017年2月11日 23:17

2 件の回答 2

0

レイアウトビューのbody要素はhtml要素の子要素にしてください。
不正常な階層構造の影響でturbolinksが誤作動して、アセットが一時的にリセットされたのだと思われます。

app/views/layouts/application.html.slim

DOCTYPE
html
  head
    == render 'layouts/asset'
    title
  body
    == render 'layouts/header'
    ...
1
  • ご指摘ありがとうございます。試した結果、現象は解消されませんでした。最終的にassets precompileを行うことで解消することができました。 Commented 2017年2月18日 16:32
0

assets precompileを行うことで解消することができました。SabaMotto さんの方法では解決しませんでした。

-- 質問者さんのコメントより

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。