不在iOS瀏覽器中顯示的畫布外菜單

Question

這個問題在SO上反復詢問，但沒有一個答案適合我，所以我發布了這個。 雖然它可以在桌面和Android Chrome上運行，但我無法在iPhone iOS 11 Safari和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> 

我嘗試過：將“ touchstart ”事件添加到折疊按鈕但不起作用。

所以我認為問題在於css 轉換和轉換 。 但我已經為所有這些代碼添加了-webkit-前綴，我想不出任何進一步的事情。 您可以在我的網站上查看此行為。

TL; DR Off-canvas菜單在iOS瀏覽器上不起作用，我認為問題在於css 轉換和轉換 。 幫我修改代碼。

編輯：這不是轉換的問題。 當我點擊按鈕時，導航鏈接就在那里，我可以點擊它們。 我只是沒有看到他們。 奇怪的是它只發生在iOS Safari上。

Answer 1

你能試試這段代碼嗎？ 我檢查了網站，因為你使用單獨的關閉按鈕來關閉菜單，你不需要使用toggleClass ，而是在jQuery本身中給出css轉換。

 $('.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>