Chrome отображает страницу дважды, а Safari работает как положено - PullRequest
Новая
       20

Chrome отображает страницу дважды, а Safari работает как положено

1 голос
/ 09 мая 2019

Ruby on Rails 6.0 (RC1) правильно отображает с помощью Bootstrap 4.3.1 в Safari, но, похоже, дважды отображает страницу в Chrome (так выглядит), сначала без использования информации о Bootstrap CSS, а затем применяет форматирование Bootstrap. В течение доли секунды я вижу страницу в «сыром» формате, прежде чем она переформатируется.

Chrome в Windows: тот же результат, рендеринг дважды / мерцание Edge: работает правильно Firefox на Windows: ведет себя плохо, как Chrome

При правильной работе я имею в виду, что при рендеринге страницы он не мигает.

Вот что я сделал.

  1. Создание нового приложения RoR 
  rails new test600
  1. Создать контроллер 
  cd test600
  rails g controller main index
  1. Установить Bootstrap, JQuery и Popper 
  yarn add bootstrap@4.3.1 jquery popper.js
  1. Отредактируйте config / webpack / environment.js так, чтобы он читал: 
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
  1. Отредактируйте app / javascript / packs / application.js и добавьте 
require('jquery')
require('bootstrap/dist/js/bootstrap.js')
require('bootstrap/dist/css/bootstrap.css')
  1. Измените app / views / layouts / application.html на 
<!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>
  1. Запустите приложение, либо rails s, либо puma, оба дают одинаковый результат.

1 Ответ

1 голос
/ 09 мая 2019

Эта проблема известна как Flash Of Unstyled Content (FOUC) . Это может быть связано с вашим require('bootstrap/dist/css/bootstrap.css') в application.js, который асинхронно загружает файл CSS во время загрузки страницы, а не блокирует загрузку страницы во время загрузки таблицы стилей и применяют ее стили.

...