Off-canvas menu not showing in iOS browsers

Question

This question is repeatedly asked on SO but none of the answers works for me so I posted this. I cannot get the off-canvas menu to work on iPhone iOS 11 Safari and Chrome although it works on desktop and Android Chrome.

 $('#nav-header .nav-collapse-btn').on('click',function(){ $('#main-nav').toggleClass('nav-collapse'); }); 

 #main-nav { position: fixed; top: 0; left: 0; bottom: 0; max-width: 100%; width: 0%; margin-left: 0; padding-top: 30px; overflow-x: hidden; overflow-y: auto; background: #07090c; -webkit-box-shadow: 5px 0px 6px -5px rgba(0, 0, 0, 0.4); box-shadow: 5px 0px 6px -5px rgba(0, 0, 0, 0.4); -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 0.2s all; transition: 0.2s all; z-index: 99; } #main-nav.nav-collapse { width: 100%; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="nav-header"> <div class="navbar navbar-expand-md"> <nav id="main-nav"> <ul class="main-nav nav navbar-nav flex-nowrap"> <li><a href="#" class="nav-link">...</a></li> ... </ul> </nav> </div> <button class="nav-collapse-btn">...</button> </div> 

I've tried: Adding ' touchstart ' event to the collapse button but it doesn't work.

So I think the problem is with css transform and transition . But I've already added -webkit- prefixes to all those codes and I can't think of anything further. You can check out this behaviour on my site .

TL;DR Off-canvas menu does not work on iOS browsers and I think the problem is with css transform and transition . Help me modify the code.

Edit: It is not the problem with transform. When I clicked the button the nav-links are there, I can click them. I just don't see them. Strange that it only happens on iOS Safari.

Answer 1

Could you try out this code? I checked the website, and since you're using a separate close button to close the menu, you wouldn't need to use toggleClass , instead give the css transform in jQuery itself.

 $('.nav-collapse-btn').click(function() { $('#main-nav').css({ 'transform': 'translateX(0)' }); }); $('.nav-close-btn').click(function() { $('#main-nav').css({ 'transform': 'translateX(-100%)' }); }); 

 #main-nav { position: fixed; top: 0; left: 0; bottom: 0; width: 100%; margin-left: 0; padding-top: 30px; background: #07090c; -webkit-box-shadow: 5px 0px 6px -5px rgba(0, 0, 0, 0.4); box-shadow: 5px 0px 6px -5px rgba(0, 0, 0, 0.4); -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 0.2s all; transition: 0.2s all; z-index: 99; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="nav-header"> <div class="navbar navbar-expand-md"> <nav id="main-nav"> <ul class="main-nav nav navbar-nav flex-nowrap"> <li><a href="#" class="nav-link">Link</a></li> <li><a href="#" class="nav-link">Link</a></li> <li><a href="#" class="nav-link">Link</a></li> </ul> <button class="nav-close-btn">Close</button> </nav> </div> <button class="nav-collapse-btn">Open</button> </div>