Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rails Turbolinks 5 causing causing ui flicker?

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.

like image 586
Paul Brunache Avatar asked Oct 05 '16 02:10

Paul Brunache


1 Answers

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.

like image 189
Andrew K Avatar answered Nov 18 '22 05:11

Andrew K