I’m wondering if Hugo-based website page flickering is just something that’s supposed to be tolerated as a tradeoff with some of Hugo’s other advantages.
I recently opened an issue about this in github, which was actually reopening an older issue, but it was immediately closed and locked as resolved.
I’m experiencing a very fast full-page white flash/flicker on page load when navigating Hugo-based websites. There are also frequent flashes of unstyled content. This is happening with every Hugo theme demo I have tried from here:
It also happens with the Hugo website itself.
I’m experiencing this in Chrome, Firefox, and Edge on Windows 10.
I’m not experiencing it when previewing any Gatsby theme demos, and it seems to depend on each theme architecture with Jekyll - some have FOUC issues and some don’t.
Hugo is my preferred site generator because of its seamless integration with the R blogdown package, but the page flickering/FOUC issue is a serious barrier for websites that demand a cleaner user experience.
Any ideas why this could be happening with ALL Hugo-based websites and if there’s any way to fix it?
It doesn’t happen for me, or, I daresay, other users of Hugo. Certainly you are the first to complain of this. Hugo doesn’t modify the HTML, CSS, or JavaScript so any flickering issues are likely caused either by the theme itself, or is an artifact of your setup rather than normal Hugo behaviour.
You will need to provide complete documentation of not only the site and theme you are testing against, but your system and browser setup if you want support on this.
Also, if testing using the local ‘server’ (hugo serve) have you tried disabling the 'livereload` feature, as that causes a page reload and refresh when a page is changed. If you using some tool like Tailwind you may find that it causes a lot of file changes that trigger the reload.
Honestly, I was trying many search queries as I didn’t know how to describe this, and this is the only support ticked / thread I’ve found that perfectly matches my experience.
I’ve started learning to code with Hugo as it was suggested to me by my peers, but haven’t launched anything yet because of this issue.
I’ve since learned how to use Nuxt, 11ty and started learning a couple of other platforms / ways to build a website and launched projects with those, simply because I could never find a solution to this flicker.
It only happens when I visit other people’s Hugo sites, or demos of Hugo themes, or my projects (even localhost) with other people’s themes. It does NOT happen only in one case – if I use a custom theme that I wrote myself (with tailwind).
The flash is so disturbing and unbearable that I just couldn’t force myself to launch production sites with Hugo, it’s that noticeable to me, and for almost a year I can’t for the life of me pinpoint the exact reason for it.
I thought it was firefox, but it happens on chromium based browsers, too. It’s just so sad.
Can you post some URLs to sites where you see this issue?
Flickering is always due to css or js. (Image tags without width and height might be counted as “flickering” as well.) Maybe some popular Hugo themes have some issues in this regard and others have copied it.