Laggy Scroll - IE11 / Sluggish Experience - Chrome

Hi,

In IE11, we encountered a very sluggish, slow and laggy scroll of the window in our website using the themeco pro theme.
When the theme disabled, the problem disappear.

Summary

https://lumenis-staging.com/

Can you please take a look and tell us how to fix that?
Thanks.

Hey @Amir.Caspi,

I checked your site in IE and the issue happens the moment your content completely loads. There’s probably something in your content that’s causing this. Would you mind duplicating your home page and in the copy, remove the slider and the carousel and then test again.

Can you also show us what’s happening if you switch to the default theme? You can use this tool https://www.useloom.com/ to record what’s happening.

Thanks.

Hi Christian,

Thanks for your reply, I disabled all sort of things in the website and I noticed that if I remove the header from a page it fixes the issue. What’s in the header can create that sort of problem?
Thanks.

Hi Amir,

It seems IE is having a hard time processing simultaneously all things going on your site (e.g. header animation, slider effect, carousel). Since this is a browser specific (performance) issue there is nothing we can do about it. Good news is IE is the less use browser is the world.

Thank you for understanding,

Hi,

This is not an acceptable answer. In our market, IE usage is higher than the average + many employees of our company use this browser as the default browser.

I can also confirm that the bug is related only to the theme’s header. We think that it is more specifically the menus in the header. It is definitely not related to any other animation/script/component in the site, as we tested a page with only the header and text, the issue still exist exactly as in other pages. Once the header is disabled, the problem goes away and the scroll is very smooth in IE11.

The theme’s description indicates it is intended to professionals, praising the advanced headers builder.
We are scheduled to have a company launch of this website very soon (next few days) and we must get a fix for that problem.

Please let me know if you need further information from me.
Thanks,
Amir.

Hey @Amir.Caspi,

Sorry for the confusion. IE 11 is still supported.

Also, thank you for your test. It enabled me to work only on the header. I saved your header as a template and loaded it to my test site and the issue persisted there. The issue is coming from your Sticky Bar > Corporate Menu > Navigation Inline. But, it was not caused by the theme. It was just the effect of adding a lot of elements into a page and using a lot of menu items is a common way to get to this issue especially in your case where you have 2 long menu list (one in the static bar and one in the sticky bar).

If you wonder why the issue persisted in my test site, it’s because I also have lots of menu items in my test menu intended for testing purposes. It persisted but not as drastic as in your site as you have more menu items. I switched to a shorter menu and the scroll was smoother.

There’s nothing we could do in this case because this is a browser thing. It will also happen in other themes. You will need to reduce the menu items in your menu. It’s also not recommended in terms of User Experience to have that many menu items.

Hope that helps.

Hi Christian,

We chose the pro theme over the X or other themes because it is marketed toward advanced needs and professional websites.

I know that we have many menu items but it is still a fairly normal amount. I would understand your concern if we had thousands of menu items or more.
I never encountered such browser behavior in any website or any browser that is caused by the number of menu items.

Please see two examples:
Our current website, which is essentially the same but using different technology, same number of menu items but no issue with IE scrolling:

Summary

https://www.lumenis.com/

More relevant example is the exact same website we built with your theme, only using the Twenty Seventeen theme. Same number of menu items also with a sticky menu and a mobile menu, all working fantastically with no issue with IE11 scrolling:

Summary

http://lumenis2.onpressidium.com/

There is no way around the understanding that something in the theme is causing that problem in IE (maybe some script?).
If medium-large structure menus is something that is limited with the pro theme, I must say that the name and description of the theme are very very misleading. Please stand behind your title at: https://theme.co/pro/ “The Most Advanced Website Creator for WordPress.”

Please understand our urgency, we are launching this website very soon with many users that will access it using IE11. We would be more than happy to get paid support if it will expedite the process of fixing it.
We will welcome any creativity that will solve this issue as fast as possible.

Thanks,
Amir.

Hey Amir,

Let me show you the difference. Both the site’s you posted are only using 1 long simple menu. Your site with the issue is using 2 long menus (1 in your Menu Bar and 1 in your Sticky bar). I showed you that in my previous reply. I even posted specific screenshots. I also would like to add that Pro Menu does have additional styling and effects unlike in the sites you posted.

Now, please try removing the menu in the sticky header then test again. If you want to replicate the behavior in this site, simply delete your third bar and make the two top bars sticky. Please try this first and if the issue persists, we can investigate other areas. Scripts are a possibility. But, it was removing 1 long menu that fixed the issue in my test.

Regarding your comment:

That is correct. With all due respect, we understand that you’re frustrated but this issue is not related to the creation of the whole website which is what was meant in the slogan. This does not also mean that adding lots of elements will not have an effect in page performance.

Please also note that we respect each and every customer’s time here. I have spent time investigating this. Otherwise, I would not have come up with the discovery of the 2 long menus in the header.

We do not have premium or paid support but you can contact us for custom projects through this link.

Thanks.

In the following version of the site there is no sticky bar or sticky menu at all, the behavior is not even slightly better on IE11:

Summary

http://lumenis3.onpressidium.com/

Also, I added to the following site, a secondary menu with the same menu items count, it still behaves just fine on IE11 with two mwnus.

Summary

http://lumenis2.onpressidium.com/

These two examples contradicts the differences you mentioned in your last reply.

I already submitted the contact form you sent me and I received a reply to ask in the support forum.
This issue is critical for us and there seems to be lack of understanding of the urgency we have.

Yes, there’s no sticky bar on site because you hid it. I checked the source code and you still have the third bar which contains the 2nd long menu in http://lumenis3.onpressidium.com/

Please remove that first.

This site still has 1 long menu and uses the same menu for desktop and mobile. It’s not the same as I described.

I also just discovered that you have 3 menus in your header and it’s the Navigation Collapsed.

Please note again that we’re here to discover what is causing the issue. We are not competing on what’s right or what’s wrong. With that said, we kindly ask for your cooperation.

Update: I just duplicated your header and removed all menus in the bar and assigned it to a test page I created in your site https://lumenis-staging.com/x-support-test/. The point here is not to show you that you should not have a menu. Far from it. The point here is you should reduce the number of menu items.

You can see the result in this video. As you can see in there, the scroll is very smooth.

The bottom-line here is, you can’t have that lots of menu items in page because it will degrade the performance of your site. IE is an old browser too so it can’t handle that many elements. The site’s you pointed out are simple themes. They are unlike Pro, a feature rich theme.

Thanks.

I’m sincerely sorry if you got the feeling that I’m trying to compete with you, rest assure that my sole goal is to solve this bug ASAP.

I can keep spending time on showing you examples of how it is really doesn’t matter how many menu items or menus we got, as long as the menus iare OK.

Please try to look at this objectively, there is a definite issue with the pro’s header menus and IE11.

Please visit the following page, it contains five of our menus with all of the items and levels inside.
One of them is the default theme’s menu without header attached, and the other 4 were added to the page directly.
The pro theme is being used, so there is no fear the light weight theme is mitigating the issue. All of the content is also added to the page The scrolling is 100% fine in this page using IE11.

Summary

http://lumenis6.onpressidium.com/

I genuinely ask you to provide a fix for that problem in the pro theme which we’ve put all of our efforts in building the website with. If required, we are willing to pay extra to fix this problem as quick as possible.

Best,
Amir.

Hey Amir,

Your sample does not replicate what’s happening in Pro.

In Pro, 1 menu item has 7 elements and that is not to mention the scripts that come along with the menu. There might be another factor contributing to this but the number of elements or nodes alone is a significant factor (at least in my test).

A menu item in X and the menus you’ve added in your page through Visual Composer has 3.

Anyway though, since your adamant that you’re not going to reduce your menus, I’ll post this in our issue tracker so our development team would be made aware of this situation once they go through the list of reports. Just note that there’s no guarantee that an immediate solution would be provided.

And, since you already tried our contact form, there’s is no way we could provide a paid support. This will need to undergo the process like other reported issues.

Your patience and understanding would be very much appreciated.

Please understand that this is a professional website, it means that we cannot change the whole menu structure one day just because a buggy menu is standing in our way. Saying that, I went ahead and reduced the menu items drastically and also removed the sticky header. The clunky behavior remains, I tried it on:

Summary

http://lumenis6.onpressidium.com/aesthetic/

You also mentioned that the sample does not replicate whats happening in pro, of course not, the whole point was to show that it is not related to the number of menu items but to something else in pro.

Although having 7 elements for each menu item seems like a problematic thing, I also don’t think it what causes the issue. In the following test I added 2 more none-pro menus to a total of 7 full menus. These 7 non-pro menus should have the same number of elements as 3 pro menus. The scrolling behavior in IE11 is still very smooth.

Summary

http://lumenis6.onpressidium.com/

You mentioned something about scripts that are related to menu items, that may be the source of the issue.
I would be grateful if you could provide us with some outside-the-box-thinking solution to this problem, or expedite the issue in your process.
P.S, I tried the contact form again but didn’t get any response, maybe you can check about that too?

Thanks,
Amir.

Hey Amir,

I see you reduced the menus in this page from 187 to 75.

Would you mind completely removing the Sticky bar instead of hiding it only? You are only hiding it using the Hide During Breakpoints. That does not remove the menu in the page.

I have posted this in our issue tracker. Though we understand that you’re frustrated because of your project deadline. But, depending on the complexity of the issue, providing an immediate solution is not guaranteed.

Please stay tuned.

Update: Alternatively, you can try using UberMenu. For more details, please see https://theme.co/apex/forum/t/extension-ubermenu/75

Thanks.

That is a great direction Christian, I would go ahead and try it right away. What would be the best practice to add the ubermenu to the pros’s header builder? Taking into account we need to use several menus with completely different styles on different headers?
Should that be with a shortcode in a content block?
How will we use the single ubermenu control panel to style multiple menus with different look and feel?

Thanks!

Hi,

Yes, that is correct. You need to use the shortcode in a conten block.

For multiple menus kind refer to the link below

Hope this helps

Thanks for the info Paul.
It basically solved the IE11 sluggish scroll issue that was caused by the pro menus, which I’m very happy about!
It also led me to discover two more points:

  • The collapsed mobile menu that comes with pro is not responsible for the issue at all so we will probably continue using it and disable the ubermenu responsive mode which is not that great out of the box.

  • The sticky functionality of the header builder also creates a sluggish scroll in IE11, but only when revealed/hidden - We still need to solve that, any ideas how can we fix it?

I tested the ubermenu solution on this page:

Summary

http://lumenis8.onpressidium.com/

P.S. We are treating this solution as a workaround which is temporary. We would still prefer to have the native header menus working properly in IE11.

Thanks!

Hi @Amir.Caspi,

I have tried and there is no temporary workaround as of this moment as it’s all done through javascript. Though, I can confirm the sluggish behavior of the header upon scrolling.

Could you try installing Smooth Scroll extension bundled to the theme?

Thanks!

Hi Rad, I tried it but it did not improve the situation. To my understanding Christian passed it to the tracker for a fix. Is that correct?