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.