After a recent update to the Mesa graphics library, many users have reported that Chromium-based browsers (Chrome, Chromium, Opera, Vivaldi, Edge, etc, and, perhaps, also Electron-based webapps) fail to render webpages correctly and produce garbled results.
This seems to be caused by Chromium caching things related to Mesa and re-using the cached copies, when the newer version of Mesa cannot work properly with the cached items generated with an older version of Mesa. It only happens when GPU acceleration is enabled in the browser.
Bugzilla report: #2193335
Chromium report: 1442633 - chromium - An open-source project to help move the web forward. - Monorail
Fedora discussion: Latest Fedora update broke Google Chrome and some extensions UI
One workaround is to disable GPU acceleration. In Chrome/Chromium settings, find “use hardware acceleration when available” option and disable it, or run the browser with the
--disable-gpu command line option. (The instructions might be slightly different for other browsers).
Another workaround is to delete directories with GPU cache files. Here are instructions for Chrome (other browsers will have their files in a different directory):
rm ~/.config/google-chrome/GrShaderCache -rf
rm ~/.config/google-chrome/ShaderCache -rf
rm ~/.config/google-chrome/Default/GPUCache -rf
If this doesn’t work, you can delete the entire
~/.config/google-chrome directory, but this will remove your personal configuration settings too. It’s probably safer to use a different workaround in that case.
Also please note that this is just a one-time fix and you’ll need to repeat this each time the rendering issue occurs (when dependencies like Mesa are updated in a specific way).
As a yet another option, you can try to install and use Chrome/Chromium (or a different browser) from Flathub rather than as an RPM. It brings its own Mesa which is probably not that often updated (but theoretically the same problem might appear there as well).
You can discuss this issue here.