I have a WordPress website that uses Elementor Pro and I have installed in the website a better search plugin. The plugin is working great but there is a glitch at the first loading of the page. If I clear the cache and load the page for the first time as a normal customer will, the search button that is in a shirt code of Elementor has a big expansion that makes the header expand about 700px and it looks like the website is broken.
how can I fix this glitch without hiding it in a pop-up?
I have tried to create a fade-in animation that was delayed 2000ms but the page loads with the glitch and after the page is fully loaded the animation starts to run.
I got an answer from the plugin creator and I will post it here as it did solve my problem.
"It is called the FOUC (flash of unstyled content). It happens when the stylesheets are not correctly loaded – usually using an asynchronous CSS loading method, that is not related to the plugin.
Some cache solutions have this feature but, check your cache plugin settings and change the Stylesheet/CSS loading method to the default (non-asynchronous) it will resolve the problem."
My cache settings for Load CSS Asynchronously were “OFF” but the Guest Optimization opt. was “ON”. and a small text was under the Load CSS Asynchronously: If your Guest Optimization is ‘ON’ your CSS Asynchronously options will still be ‘ON’ for new users even if is set to ‘OFF’
Changing the Guest Optimization to “OFF” solved the issue.