I’m not really sure what the cause of the issue actually is beyond the fact that turning on Rocket Loader causes the issue, and turning it off fixes the issue.
The website is https://tonerandinkfactory.ie, running on WordPress 5.8.2. It is using the Kadence theme, which has it’s own customisable header. The mobile header contains the logo image, a menu item (which is just a search plugin called FiboSearch in icon form), and an off-canvas menu trigger. Ordinarily, the mobile header is 75px in height. When Rocket Loader is turned on, the height turns to 150px.
I initially contact the Kadence developers on this as I didn’t suspect the problem to be with Cloudflare at all. The response they gave me before I tried turning off a number of Cloudflare options, is below:
"I see that the mobile header height is set to 75px but after the page loads, a height of 150px is being added inline. It seems the hidden search field height is being counted which is why the header renders bigger. On another reload test, the mobile header is rendered properly - Screen-Recording-2021-11-22....
Just to confirm, how are you using the search button? If you have CSS/JS optimization enabled, try to exclude the script of the search plugin you’re using to make their style/script apply right away so that the header script will not count the hidden search field’s height."
At this point I turned off all the Cloudflare options relating to HTML/CSS/JS/image optimisation/caching. This actually fixed the issue, and I managed to reduce the option responsible to the Rocket Loader.
For now it’s turned off, my site isn’t reliant on it at all thankfully so I thought I’d throw my experience into the community to see if others have had similar issues. Just for the record too, I haven’t had any issues with the other Cloudflare options relating to HTML/CSS/JS/image optimisation/caching, everything bar the Rocket Loader has been absolutely excellent for me. I’m so happy to be with Cloudflare, they’ve given me excitement in my development on the web.