Rails Turbolinks 5 导致界面闪烁问题？

Question

Rails Turbolinks 5 导致界面闪烁问题？

ruby-on-rails-5turbolinks-5

10

我的Rails应用在转换过程中出现闪烁。似乎Turbolinks是罪魁祸首。有人知道如何停止闪烁或为什么会闪烁吗？

如果您访问下面的链接并单击任何一个登录按钮，您将复制我的体验。

奇怪的是，在Firefox或Safari中访问时没有问题。这只发生在最新版本的Chrome和Internet Explorer上。因此，我不确定它是否是浏览器问题。

- Paul Brunache

嘿，@Paul Brunache，你在这方面有什么进展吗？ - rm-rf

1

@rm-rf 我最终在我的应用程序js文件中删除了turbolinks声明。我意识到我为每个项目都这样做了，因为发生的情况是turbolinks正在尝试重新绘制，而闪存是Chrome上已经存在一段时间的错误，他们似乎不打算修复。我打算使用React和React Router。 - Paul Brunache

2个回答

0

对我来说（使用Rails 7.0.4），罪魁祸首是devise的一个闪现消息。通过添加data-turbo-cache="false"，我能够防止它闪烁。例如：

<div data-turbo-cache="false">
  <% if notice %>
    <p class="alert alert-success"><%= notice %></p>
  <% end %>
  <% if alert %>
    <p class="alert alert-danger"><%= alert %></p>
  <% end %>
</div>

我最终决定完全删除 turbo。

- David

你是如何在使用Devise的同时完全删除Turbo的？我对两者都很陌生，也想尝试一下。 - cryptogopher

@cryptogopher 我想我刚刚删除了所有带有“turbo”一词的内容。 - David

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew K · Accepted Answer

在turbolinks覆盖新内容之前加载缓存时，会发生闪烁现象。我通过在布局的 <head> 中添加以下代码来解决这个问题：

<meta name="turbolinks-cache-control" content="no-cache">

上述代码禁用了turbolinks缓存功能。无缓存 == 无UI闪烁。但是，在浏览器中使用后退或前进按钮现在将执行网络调用（仍通过Turbolinks）

请参见示例代码：https://github.com/DockerOnRails/todomvc-turbolinks

另外，还有另一个选项可以在使用Turbolink.visit之前清除缓存（从而导致UI闪烁）：通过调用Turbolinks.clearCache()，这将与禁用缓存相同，但让您能够在其他地方继续使用缓存。