“Info box” carrousel on Mobile top header fails

Dear,

Please check the link below on a REAL mobile device.

Try naviguating across different pages (no matter where, just go through the different menu), and have a look at the very top red menu. You will see in there a Info Box carrousel that sometimes works, and sometimes fails.

Can you please check what’s going wrong?

Thanks
Simon

Hello,

Please provide the URL of the website to check it myself and help you out accordingly.

Best Regards

sorry forgot it 🙂

Hello,

Please Edit the Infobox carousel element and Disable the option “Init carousel on scroll” and check back.

Screenshot for Clarification: https://gyazo.com/9b9ba6c2f1112553afd2de77e8c02146

Best Regards

The setting “Init on scroll” is already disabled, so this can’t be the root cause I’m afraid.

Attachments:

You must be logged in to view attached files.

Hello,

Please Go to Theme Settings >> Performance >> JS and disable the option and check back.

Screenshot for Clarification: https://gyazo.com/270e406a4adf8b7bd73b34203b60a84f

Best Regards

This setting is also already disable. So this is not the root cause.

Access credentials below

Hello,

The Issue seems to be with cache. Please check after deactivating the cache plugin.

Best Regards

I’m afraid your answer is not a solution. I’ve cleared cache dozens of times and always had the same issue.

I can’t disactivate cache because WP Rocket cache is a must. WoodMart must be compatible with cache.

Please find a solution for this. Thanks

But have you checked how it works without the cache plugin at all?

I just made the below actions :
– cleared cache from WP Rocket
– disacted WP Rocket
– enabled Cloudflare dev mode
– cleared cache in my mobile device’s browser

I still reproduced the issue. See screenshot. So I don’t understand why it would be related to cache?

Attachments:

You must be logged in to view attached files.

You can check yourself, WP Rocket is still disabled right now.
Cloudflare dev mode is enabled also right now.

As we can see, the WP Rocket is still enabled. Could you please temporarily disable it?

It’s disabled, please check now

As we can see, it works correctly now. If not, could you please record a short video about how to reproduce this problem?

Dear Artem.

No the issue is not related to WP Rocket because I reproduced the issue just now again. Therefore, I am re-enabling WP Rocket since I just reproduced it myself WITHOUT WP Rocket.

I don’t have any precise steps to reproduce the issue, you need to spend some time on the website (more than a few seconds…), navigating across the pages and checking the header all the time if it works fine. If you spend just 5 minutes on it, you’ll see the bug coming up.

On my side, the issue appeared after opening different pages (no matter which pages), and after I scrolled fast to the bottom on one page, I went back up and I saw the header failing. See screenshot below.

So please test it throughouly for few minutes.
Thanks

Attachments:

You must be logged in to view attached files.

Hello,

But we were not able to reproduce it without WP Rocket. Could you please keep it turned off so we can see it? Or recreate it on your staging environment where you can keep the website without cache for more time.

Kind Regards

Ok I found an alternative way to reproduce the issue very easily.

1) Open the below website on desktop.
2) Open F12 Console
3) Define Mobile view

Hello,

You need to reload the browser window after resize to initiate the JS script that handle the carousel. We tested this on your website and it works correctly.

Kind Regards

I think I found how to reproduce the problem BUT it may not work every time. You need to attempt it multiple times (and on a REAL mobile device). I reproduced many times just now this way.

1) Open the website
2) Scroll fast to the footer
3) Scroll fast back up to the top
If the bug doesn’t appear, change page, and try again.
… change page, and try again, multiple times

See video.

We see some horizontal scroll on mobile devices that may cause this problem. Could you please disable all external plugins temporarily to see if the problem persists?
If not, please, create a staging clone so you can do such experiment there.

Staging below

Please, keep all plugins temporarily turned off on your staging website and test how it works.

You can do whatever you want on the staging…

Try to remove this code snippet from custom CSS and test how it works https://prnt.sc/OZbijAO18sch

Kind Regards

Removing this custom CSS seems to resolve the issue of this ticket.

However, this custom CSS was added to solve the problem mentioned in another ticket (https://xtemos.com/forums/topic/header-bug-when-url-contains/), the answer was provided by your colleague. What should I do then?

Hi,

This issue can be visible when the following conditions match:

1. You visit the page with URL that contains an anchor.
2. Your footer has negative margins that push content off the edge of the screen.

To fix this issue try to remove the following negative margin from your footer (https://prnt.sc/whdScg9NaDjr).

Kind Regards

[Author]

Posts