Page flicker problem after rendering

[bhavyanshu]

While navigating between pages, as soon as the page is rendered by rails, I notice the progress bar of turbolinks and the page flickers (like a white flash). If I remove the icon from page, the rendering is smooth again like how it should be.

After doing more research on this issue, I found: https://github.com/FortAwesome/Font-Awesome/issues/11924

The solution (https://github.com/FortAwesome/Font-Awesome/issues/11924#issuecomment-371529354) works as well. The solution is a bit of a hack to fontawesome js but I can confirm that it works.

In short,

1. Remove following from fontawesome-all.min.js

m.requestAnimationFrame||

2. Replace turbolinks load hack with

document.addEventListener("turbolinks:before-render", function(event) {
    FontAwesome.dom.i2svg({
        node: event.data.newBody
    });
});

I think it would be nice if you can check it out and figure out a best possible solution.

[tomkr4l]

@bhavyanshu Thank you. I will look at it and fix flickering in next release.

[tomkr4l]

@bhavyanshu Please try upgrade to version 0.3.3. I've included fix you suggested and flickering should be solved. I will keep an eye for issue you reffered and let's see if it gets fixed from FA team in the future.

[roelandxyz]

Here is documentation about this: https://fontawesome.com/how-to-use/on-the-web/using-with/turbolinks They added an extra option 'mutateApproach'