Rocket Loader adding inline height to mobile header in WordPress site

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.

I doubt Rocket Loaders modfies any source code.

Furthermore, is that value changing and depending on some JavaScript file from some builder or?

Wish I could open it and try out, but I get error due to your Firewall Rules:

May I ask have you tried purging the cache at Cloudflare from the Dashboard (Caching → Configuration → Purge Everything), and trying to open your Website in some other Web browser or a Private Window?
How about clearing your Web browser cache?

I’m not sure what the actual cause for the issue is, I just know that Rocket Loader seems to ‘turn on’ the issue. I’ve cleared the cache multiple times, every time I change a setting in Cloudflare or change something on the site I clear the cache. I’ve also tested in multiple browsers over the last few weeks, incognito mode, cleared caches constantly. I’ve been able to whittle it down out of all the settings in Speed > Optimisation to Rocket Loader.

I’m not sure - I’m using WordPress, Kadence theme, all pages are built using Gutenberg, no other page builders. The email I received from the Kadence developers which I’ve quoted in original post might give more clarity. The Rocket Loader is off at the minute, I can turn it on if you let me know (I will see your reply as soon as you reply).

What country are you connecting from?

1 Like

Croatia :croatia:

Try gaining access there, should be able to

Let me know when you want me to turn on Rocket Loader for you and clear the cache.

height: 170px;
min-height: 170px;
max-height: 170px;

Is this added by the attribute value from data-start-height="170" (even from parent element) via JavaScript?

Currently, you are running without Rocket Loader - as far as I do not see any indication of it’s existance, right?

I believe it’s not due to Rocket Loader, rather to the script that measures, detection and does the calculation, even x times (or not maybe?) of the window screen width at the given moment.

As far as I tested now, when I resize with my web browser using my mouse, then wider it , then resize again, the “170px” height stays the same until I hit F5 (refresh) at that “resized” browser width which therefore the header height becomes 75px.

  • in between to test again, I clear the Web browser cache …

See here in action on the video below:

On my mobile phone, it’s ok 75px no matter if I rotate my mobile phone device, stays “as-is” the height.

But, on my PC when I do this “testings” with my mouse resizing web browser width (no normal user does it), it stays at first “cached” version of something and seems it is a bit “broken”.

This height should be done only with CSS, as far as I use Bootstrap and similar HTML/CSS frameworks.

I’m not sure if that’s added via JavaScript. What I can do is approach the Kadence developers with some questions though, which I’d certainly love to do.

Yes currently running without Rocket Loader.

I see your testings there, that is interesting. I hadn’t been resizing the window like that when I was testing it, as this issue cropped up after I had finished designing the site, so I wasn’t actively resizing the window. I’ve been testing it on my mobile in Safari and Brave, both incognito, regularly purging the cache.

I will give this post to the Kadence developers, they will be able to see your information there and it may help them out. This is beyond my scope of understanding. I hugely appreciate you going out of your way to give clarity on the situation like this, you’re very kind.

1 Like

Yep, the same behaviour as you described as it could be due to Rocket Loader (as it can be seen in my video - will leave it so you can share it).

I would also add a note:

  • <link rel="stylesheet" id="kadence-header-css" href="https://tonerandinkfactory.ie/wp-content/themes/kadence/assets/css/header.min.css?ver=1.1.10" media="all">

Is placed into the <body>...</body> element, rather than insite <head>...</head>, right above <header>...</header> element which contains menu and other stuff from header as well.

A file linked to your navigation (menu) to inspect (located somewhere at the bottom of the page source code):

  • https://tonerandinkfactory.ie/wp-content/themes/kadence/assets/js/navigation.min.js?ver=1.1.10

But, again, if a visitor comes to your Website using desktop PC and big screen, it will be good. The screen will not resize or shrink by default (without a user action to resize the web browser) :smiley: , same goes for mobile phone, even while rotating it, the height was presistent so maybe not some bug but good to take a look at it for furthere development :wink:

I will email them a link to this and I’ll reply to this thread if there’s any queries. Thank you fritex!

1 Like

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.