Rails Turbolinks 5 causing causing ui flicker?

Asked 5/10, 2016 at 2:41 Answered 2/11, 2022 at 12:57

My rails app is flickering during transition.Turbolinks seems to be the culprit. Does anyone know how to stop the flickering or why it's flickering at all?

If you access the link below and click on any of the login buttons you'll replicate what I'm experiencing.

The odd thing is that there are no issues when accessing it from firefox or safari. This only occurs on the latest version of chrome and internet explorer? So I'm not sure if it's a browser issue.

Fung answered 5/10, 2016 at 2:41 Comment(2)

Hey @Paul Brunache did you ever get anywhere on this? – Messapian 20/2, 2017 at 19:39

@Messapian I just ended up removing turbolinks declaration in my application js file. I realized I'd done this for every project because what's happening is turbolinks is trying to repaint and the flash is a bug on chrome that's been open for a while that they don't seem like they're going to fix. I opened on using react with react router. – Fung 21/2, 2017 at 17:16

The flicker happens on the loading of the cache just before turbolinks overwrites it with the new content. I was able to fix this by placing (in the <head> of the layout) the following code:

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

The above code disables turbolinks caching feature. No caching == no UI flicker. However, using the back or forward buttons in the browser will now do a network call (still via Turbolinks)

See example code at: https://github.com/DockerOnRails/todomvc-turbolinks

There is also another option to clear the cache before you use Turbolink.visit (which causes the UI flicker): By calling Turbolinks.clearCache(), this will do the same as the disabling of the cache but gives you the ability to keep using the cache in other places.

Beckford answered 3/9, 2017 at 18:36 Comment(3)

You can learn more about the cache here: github.com/turbolinks/turbolinks – Beckford 3/9, 2017 at 18:36

Is it really the case that we can't use caching on any page that has images? That seems a little extreme? The cache is pretty awesome and I feel like it's a shame to just throw it away because the page contains an image? – Fibrinolysis 1/10, 2019 at 12:9

I'm not sure, there might be a way to verify that the content has actually changed before re-writing it. I didn't see a way of doing it with the turbolinks version I had tested with when responding to this question. I haven't used turbolinks since then though. – Beckford 21/11, 2019 at 21:54

The culprit for me (with Rails 7.0.4) was a flash message from devise. I was able to prevent it from flickering by adding data-turbo-cache="false". For example:

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

I actually ended up deciding to remove turbo entirely.

Eames answered 2/11, 2022 at 12:57 Comment(2)

How did you remove turbo entirely while using Devise? I'm quite new to both and trying to do it as well. – Bharal 16/4, 2023 at 0:50

@Bharal I think I just removed everything with the word turbo in it – Eames 18/4, 2023 at 12:24

Recommended topics

Hot tags