Safari 按预期工作时 Chrome 呈现页面两次答案

【问题标题】：Chrome renders page twice while Safari works as expectedSafari 按预期工作时 Chrome 呈现页面两次
【发布时间】：2019-09-27 07:39:09
【问题描述】：

Ruby on Rails 6.0 (RC1) 在 Safari 上使用 Bootstrap 4.3.1 正确呈现，但似乎在 Chrome 上呈现页面两次（因此出现），首先不使用 Bootstrap CSS 信息，然后应用 Bootstrap 格式。在重新格式化之前，我可以在几分之一秒内看到它的“原始”格式。

Windows 上的 Chrome：相同的结果，渲染两次/闪烁边缘：正常工作 Windows 上的 Firefox：像 Chrome 一样的行为不端

正常工作是指渲染页面时它不会闪烁。

这就是我所做的。

创建一个新的 RoR 应用程序

  rails new test600

创建控制器

  cd test600
  rails g controller main index

安装 Bootstrap、JQuery 和 Popper

  yarn add bootstrap@4.3.1 jquery popper.js

编辑 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

编辑 app/javascript/packs/application.js 并添加

require('jquery')
require('bootstrap/dist/js/bootstrap.js')
require('bootstrap/dist/css/bootstrap.css')

将 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>

启动应用程序，无论是 rails s 还是 puma，都会给出相同的结果。

【问题讨论】：

标签： ruby-on-rails ruby webpacker ruby-on-rails-6

【解决方案1】：

为了向Greg Burghardt's response 致敬并帮助那些将登陆这里的人，我想添加两个对我有帮助的提示。

验证您是否使用 stylesheet_pack_tag 而不是（或旁边）stylesheet_link_tag insine yout application.html.erb。
将extract_css: true 设置为config/webpacker.yml (source)。

【讨论】：

【解决方案2】：

这是一个称为Flash Of Unstyled Content (FOUC) 的问题。这可能是由于您在 application.js 中的require('bootstrap/dist/css/bootstrap.css')，它在页面加载时异步下载 CSS 文件，而不是在下载样式表并应用其样式时阻止页面加载。

【讨论】：

谢谢，这就是问题所在。现在我需要弄清楚如何解决它，因为我无法知道 CSS 文件的加载顺序。
只包含 bootstrap.css 通常带有 <link> 标签或在另一个样式表中使用 @import 指令。
我认为应该有更好的解决方案，@GregBurghardt。因为那样我们需要扔掉 webpack 并回到资产管道。
@DiegoStiehl：不幸的是，这确实是一个浏览器问题。