Home › Forums › WoodMart support forum › “Info box” carrousel on Mobile top header fails

“Info box” carrousel on Mobile top header fails

Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • February 12, 2022 at 11:12 am #352478

    Jeriss Cloud Center
    Participant

    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

    February 12, 2022 at 11:25 am #352483

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

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

    Best Regards

    February 12, 2022 at 11:32 am #352487

    Jeriss Cloud Center
    Participant

    sorry forgot it 🙂

    February 12, 2022 at 11:57 am #352494

    Aizaz Imtiaz Awan
    Keymaster

    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

    February 13, 2022 at 9:09 pm #352640

    Jeriss Cloud Center
    Participant

    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.
    February 14, 2022 at 6:29 am #352697

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

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

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

    Best Regards

    February 15, 2022 at 10:58 am #353116

    Jeriss Cloud Center
    Participant

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

    Access credentials below

    February 15, 2022 at 12:40 pm #353172

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

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

    Best Regards

    February 15, 2022 at 2:30 pm #353201

    Jeriss Cloud Center
    Participant

    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

    February 15, 2022 at 2:32 pm #353204

    Artem Temos
    Keymaster

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

    February 17, 2022 at 11:55 am #353772

    Jeriss Cloud Center
    Participant

    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.
    February 17, 2022 at 11:56 am #353774

    Jeriss Cloud Center
    Participant

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

    February 18, 2022 at 7:10 am #354122

    Artem Temos
    Keymaster

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

    February 21, 2022 at 1:59 pm #354845

    Jeriss Cloud Center
    Participant

    It’s disabled, please check now

    February 22, 2022 at 7:12 am #355000

    Artem Temos
    Keymaster

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

    February 22, 2022 at 9:44 am #355045

    Jeriss Cloud Center
    Participant

    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.
    February 23, 2022 at 8:48 am #355280

    Artem Temos
    Keymaster

    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

    February 24, 2022 at 9:11 am #355726

    Jeriss Cloud Center
    Participant

    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

    February 25, 2022 at 1:43 pm #356014

    Artem Temos
    Keymaster

    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

    February 25, 2022 at 8:11 pm #356064

    Jeriss Cloud Center
    Participant

    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.

    February 27, 2022 at 11:11 am #356282

    Artem Temos
    Keymaster

    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.

    March 2, 2022 at 10:08 pm #357022

    Jeriss Cloud Center
    Participant

    Staging below

    March 3, 2022 at 6:14 am #357062

    Artem Temos
    Keymaster

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

    March 3, 2022 at 9:25 am #357113

    Jeriss Cloud Center
    Participant

    You can do whatever you want on the staging…

    March 3, 2022 at 10:58 am #357144

    Artem Temos
    Keymaster

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

    Kind Regards

    March 4, 2022 at 8:24 am #357370

    Jeriss Cloud Center
    Participant

    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?

    March 5, 2022 at 8:45 am #357565

    Bogdan Donovan
    Keymaster

    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
Viewing 27 posts - 1 through 27 (of 27 total)