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

Question

Ruby Rails 6.0 (RC1) 在 Safari 上使用 Bootstrap 4.3.1 正确呈现，但似乎在 Chrome 上呈现页面两次（所以它出现), 首先不使用 Bootstrap CSS 信息，然后应用 Bootstrap 格式。有几分之一秒的时间，我可以在重新格式化之前看到 "raw" 格式的页面。

Chrome on Windows：结果相同，渲染两次/闪烁边缘：工作正常 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，都给出相同的结果。

Answer 1

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

Answer 2

为了赞美并帮助那些将登陆这里的人，我想添加两个对我有帮助的提示。

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

Answer 3

什么没有起作用：

这样做会产生无样式内容的闪光。

// app/javascript/styles/application.js
import("bootstrap/dist/css/bootstrap");

做了什么工作：

// app/javascript/styles/application.js
import 'styles/site'

// app/javascript/styles/site.scss
@import "bootstrap/dist/css/bootstrap";

在 config/webpacker.yml

 extract_css: true

参考

这需要反复试验。

很有帮助
对相关问题的回答说要创建至少一个 css 文件并导入它，所以我尝试了那个（bootstrap 文件，但大概你可以使用任何)
This 文章向我展示了如何做到这一点

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

Chrome renders page twice while Safari works as expected

ruby

ruby-on-rails

webpacker

ruby-on-rails-6

什么没有起作用：

做了什么工作：

参考

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

Chrome renders page twice while Safari works as expected

ruby

ruby-on-rails

webpacker

ruby-on-rails-6

什么没有起作用：

做了什么 工作：

参考

做了什么工作：