This is probably due to either long load times for imported fonts (e.g. Google fonts) &/or you have multiple stylesheets loading & being rendered in sequence.
I noticed in your other thread about child themes that you switched to using @import instead of enqueuing the parent stylesheet.
I’m pretty sure this takes longer to load & results in a full load & render of each stylesheet separately – which can cause flickering as each stylesheet is rendered then changed when the next stylesheet is loaded & overwrites the previous styles.
If you have any css loading in the footer, this can also cause visual changes as css loaded in the head will be rendered first then changed once the css in the foot is called & loads.
Thanks for this information! I would love to try enqueuing the parent stylesheet using functions.php (instead of @import), but as I noted in my earlier post, it was breaking my media library and other things in the backend. Can you point me to a resource describing the proper way to do it?
The google fonts which are causing the problem, are being handled/loaded by the Themify Base theme. I’m inclined to believe there’s something going on with the theme, since at least two other people have reported the same problem here.
Also, the site is online now, flickering away, especially the header/logo.
http://byrdsounds.com/
I just tried switching from the @import to the functions.php enqueue method (since it only breaks the backend media library and not the site), but the font flickering persists.
Sorry for all the posts. One more update.
I installed a caching plugin (W3 Super Cache) and for now, it seems to have solved the font flicker issue. I assume this is because it has somehow unified and streamlined the loading of site components (stylesheets, scripts, etc).
Enqueuing stylesheets is here: http://codex.ww.wp.xz.cn/Function_Reference/wp_enqueue_style
Not sure why enqueuing would do something to the Media Library. I haven’t had any issues with my Media library & enqueuing tons of stuff.
Do you have a Media library plugin? Or just the default? I vaguely remember trying a Media library plugin once that had a lot of conflicts with other WP functions.
It’s possible the underlying problem is a plugin conflict & it could be any plugin, not necessarily a plugin specific to the Media library or Google fonts.
I don’t have any issues with Google fonts flickering regardless of whether caching is present or not. However, I only use about 5 different google fonts so I only have a few calls to the fonts api & minimal font changes as a result.
I just remembered something:
Are you using the customizer menu through the child theme or the parent theme? I remember having a conflict when I first switched to using a child theme.
My leftover customization via the parent theme customizer menu was conflicting with changes I made via the child theme customizer menu. I fixed this by completely resetting the parent theme customizer menu back to default & only making changes through the child theme customizer menu.
I do have more detailed custom css via separately enqueued stylesheets (more than just the child stylesheet) but still use the built-in theme customizer (via the child theme) to make the general font & colour changes.
Could this be the cause of the flickering?
