The buttons on the mobile version don't work. - Forum | JoomShaper
Staff replied Templates

The buttons on the mobile version don't work.

Asked by edumarinho 4 months ago Last activity 4 months ago

13 replies

Ziaul Kabir Staff

Hello,

Thanks for reaching out to us.

We checked the page, but we are unable to locate the button in the mobile view on our end.

Could you please share a screenshot showing the button that is not working on mobile? This will help us identify the exact section and investigate the issue more accurately.

Once we have the screenshot, we’ll be able to assist you further.

Thank you.

edumarinho Asked this

Hello, thank you for your response.

I'm sending you the links to the images so you can see the buttons that aren't working. They work on the web version but not on the mobile version. I'd like a solution so that if we need to add any new buttons, this doesn't happen again. Thank you for your help.


edumarinho Asked this

Hi
I sent the requested information 12 hours ago and have not yet received a response. Thank you for your help.

Ziaul Kabir Staff

The mobile button issue has been fixed.

Please edit your “Inicio” page using the Backend or Frontend editor. From there, you can add or remove anything as needed.

Thanks!

edumarinho Asked this

Hello

Thank you for your help. May I ask how to fix the problem? Please let me know so I can keep this in mind.

Ziaul Kabir Staff

I add a small css here: /templates/fusion/css/custom.css

Here is the css:

@media (max-width: 768px) {
    .section-circle-effect-right::after {
       pointer-events: none;
    }
}

Thanks

edumarinho Asked this

Hi again Ziaul

Thank you for your support. The buttons do work in the mobile version. However, I'm now having a problem with the Offcanvas Menu. The links aren't working on Apple iOS devices. I've tried everything, but nothing works. It works on Android, but not on iOS. You can try it on an iPhone and you'll see it's a real problem. I hope you can help me resolve this issue.

Ziaul Kabir Staff
4 months ago · edited

Hi again,

I checked the issue on iPhone/iOS Safari and the menu is actually working, but Safari is taking too much time to properly render the Offcanvas Menu. This is a common issue with iOS Safari and Helix Ultimate offcanvas animations.

The main cause is usually the combination of:

  • transform: translateX()
  • transition: all
  • nested flex containers
  • dropdown submenus
  • Font Awesome icons
  • fixed/offcanvas containers

Android browsers handle this much better, but Safari on iOS often delays repainting and recalculating the layout before the menu becomes responsive.

I believe the biggest issue is the use of:

transition: all;

inside the offcanvas styles. On iOS this forces Safari to animate every property and causes rendering lag.

Please try adding the following CSS to:

Fusion - Default → Custom CSS
or
/templates/fusion/css/custom.css

.offcanvas-menu {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform .3s ease !important;
}
.offcanvas-menu * {
    -webkit-backface-visibility: hidden;
}
.offcanvas-menu .menu-separator,
.offcanvas-menu .menu-toggler,
.offcanvas-menu a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

This improves GPU acceleration and reduces Safari repaint/reflow issues significantly.

I tested through Safari Web Inspector on macOS connected to a real iPhone, and the delay appears to be rendering/performance related rather than a broken link issue.

Please test the CSS above and let me know the result.

edumarinho Asked this

Hi again

I pasted the suggested CSS code, but it's not working. The offcanvas menu doesn't work in either Safari or Chrome for iPhone. Is there any other solution for this template? I look forward to your reply.

Ziaul Kabir Staff

Please allow us some time to investigate this issue.

Thank you for your patience.

Ziaul Kabir Staff

Please, replace these two files with attached:

JRoot/templates/fusion/js/main.js

main.js.zip

JRoot/templates/fusion/css/custom.css

custom.css.zip

Before use, please unzip them. Please, make sure you have keep your full site backup.

Thanks

Log in to reply.