Turbolinks: Caching causes render to flash if page transitions are used

[kstratis]

I decided to put some page transitions in my app today and so I used the exemplary animate.css along with the following snippet of javascript:

app/assets/javascripts/turbolinks_transitions.js

$(document).on('turbolinks:load', function(){
  $('.page-transition').addClass('animated fadeIn');
});

loaded them both and... everything seemed to work fine except for one LITTLE thing:

Otherwise, during standard navigation (via Application Visits), Turbolinks will immediately restore the page from cache and display it as a preview while simultaneously loading a fresh copy from the network. This gives the illusion of instantaneous page loads for frequently accessed locations.

It turns out that whenever caching is used (typically on pages that have already been visited) the content appears to render immediately, then disappears and then fades in using the class I defined above.

This is only happening when caching is enabled, the page in question has already been visited before and transitions are enabled.

If I disable the transitions then there is no flashing BUT again I get the flashing effect whenever I revisit pages with forms with flash messages which flash in new visits (probably has to do with cache invalidation).

If I disable caching all together everything is smooth as butter. So I am wondering, why is this happening and how to mitigate that given that one might want to use caching as well?

[JorgeATR]

I have the exact same issue, I'll keep an eye on this issue to see if there's any answer. In my case it's the navigation buttons' hover. It looks very odd. Here's a live example where you can easily reproduce this issue: padeco.herokuapp.com

Steps for reproduction:
-> Enter site
-> Visit 2nd navigation bar link
-> Switch back and forth between first/second (or any other link you have visited) to see everything and anything that has an animation "flicker" or load twice

• As far as I know there's no way to disable turbolinks caching so I'm clearing cache every time it loads as a workaround:

$(document).on('turbolinks:load', function() { 
  Turbolinks.clearCache();
});

[Pushplaybang]

any luck with this? Not great to disable the caching as it really helps the experience, which is then utterly trashed by this. @JorgeATR @kstratis

[Pushplaybang]

@JorgeATR @kstratis I think caching is part of the problem, but a little bit of a red herring.

I found by adding the following to the <hea> element we can disable the previews, which what seem to be causing the flash

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

It means that you will have your animation every load, generated from anchor clicks, programmatic calls and the browsers history back/ forward/. I'm a little torn as the instant page views in from history actions was great, and the animation feels a little superfluous in that interaction.

not perfect but an improvement.

[JorgeATR]

@Pushplaybang I really never got around to finding a solution more than settling for the workaround I mentioned in November. Turning off preview also worked though!

[Pushplaybang]

@JorgeATR its not perfect but a bit better than disabling the cache I think.

[lsei]

I think you should be able to use the turbolinks:before-cache to remove the animation classes.
https://github.com/turbolinks/turbolinks#preparing-the-page-to-be-cached

In OP's example maybe something like this could work:

document.addEventListener("turbolinks:before-cache", function() {
  $('.page-transition').removeClass('animated fadeIn');
})

The cached DOM would then not have the classes making it the same as a newly loaded page.

[Pushplaybang]

interesting, would your example not remove it from the actual page though - is there an arg parsed to that callback? Surely this would operate on the actual document.

[lsei]

@Pushplaybang That's right. This command will modify the actual page but is only executed right before the user navigates to another page, which then replaces the whole body with the new pages body. Any changes you make to the DOM at this point will not be seen by the user. The modified DOM is cached and then shown when the user visits that page again in the same sitting.

[Pushplaybang]

@lsei - ok awesome, must definitely give this a try. Would it also affect the preview? (loaded and used specifically when hitting back).

I do feel like this is a common enough question/use case/request that is worth documenting.

[chrickso]

chiming in to say i have also experienced this issue while using bootstrap 4's default animation on alerts. whenever i clicked off a page with a flash message alert and then click back to it, there was always brief flash of the old flash message fading out. adding @Pushplaybang 's tag fixed it (thanks!) but i'm not sure what effect this will have on fidelity that i haven't noticed yet and would appreciate a better solution, tho i don't have any suggestions.

[Pushplaybang]

@chrickso - still using the tag and it works a charm, if you've got a page transition like I do with multiple subtle elements animating on each page change, the preview actually isn't useful.

[domchristie]

@chrickso if you notice a flash of content after clicking a link to a previously visited page, you are seeing the cached preview first, and then it being replaced by the fresh copy. Turbolinks caches a page just before it is navigated away from, so when returning, a person sees the page exactly as they left it. To prevent elements like flash alerts from being visible in the cached copy, hook into the turbolinks:before-cache event, and remove them.

Regarding animating between transitions: the preview is designed to be instantaneous. If you still want to animate transitions when returning to a page which exists in the cache, then @pushplaybang's solution is the one to go for :)

If Turbolinks were to have animation hooks, it is likely that this case will be considered. As there is already an issue covering animation, I'm closing this for now. Thanks!

[frederikhors]

I read this whole thread and tried the method I explained here: https://github.com/turbolinks/turbolinks/issues/488.

I only have one problem when I browse through the pages the first time and I need your brain to find a solution. Could you?