首次訪問頁面后，CSS高度過渡在iphone上不起作用

Question

我有一個網站，其中導航和頁腳欄的css轉換在iphone上無法正常工作。 我正在使用SASS編譯成壓縮CSS。 我試圖消除overflow:hidden; 並使用邊距代替高度，但是沒有一個起作用。 我從來沒有遇到過這個問題，也不知道是什么原因引起的。

該站點的實時版本為http://connectroot.com

這也在此站點上發生： http : //pbwebd.com/testing/ewealth

最新的網站是： http : //pbwebd.com/testing/artists-theme/

當瀏覽器在模擬iPhone時，菜單和頁腳欄工作正常，但在實際設備上卻不行。

第一次訪問該站點時，一切都很好。 如果您導航到站點上的另一個頁面，則菜單或底部欄不會滑動到正確的高度。 無論您轉到哪個頁面，甚至返回首頁，都無法正常工作。 該網站是使用WordPress構建的。

由於導航和頁腳欄也會發生相同的問題，因此我僅向您顯示導航代碼。

SASS：

.nav-wrapper {
  height: auto;
  position: relative;
  overflow: hidden;
  @include transition(height);
  @media #{$bpNAV2}{
    height: 0;
    &.open {
      height: 225px;
    }
  }
}
@mixin transition($type){
-webkit-transition: $type 300ms;
   -moz-transition: $type 300ms;
    -ms-transition: $type 300ms;
     -o-transition: $type 300ms;    
        transition: $type 300ms;
-webkit-transform: translateZ(0);

}

菜單PHP：

<div class="nav-wrapper">
    <div class="nav-div">
        <nav>
            <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
        </nav>
    </div>
    <div class="sub-nav-div">
        <nav>
            <?php $obj = get_queried_object();
            $custom_post_type = $obj->post_type;
            if(is_user_logged_in() && has_nav_menu('subdir')){
                echo '<div id="subdir-nav">';
                wp_nav_menu(array('theme_location' => 'subdir'));
                echo '</div>';
            } elseif(has_nav_menu('sub')){
                echo '<div id="sub-nav">';
                wp_nav_menu(array('theme_location' => 'sub'));
                echo '</div>';
            } ?>
        </nav>
    </div>
</div>

JS：

$("#toggle").on('click', function(event){
    $(".nav-wrapper").toggleClass('open');
});

對於此站點： http : //pbwebd.com/testing/artists-theme/ ，所有頁面均有效，但首頁僅在首次訪問該頁面時有效。 我似乎無法弄清楚問題出在哪里。 這是JS的另一個版本：

$('#toggle').on('click touchstart', function(){
    $('nav').toggleClass('show');
    return false;
});

如果我關閉手機后再打開，菜單將再次起作用。

Answer 1

如果我在javascript中包含touch事件，似乎可以解決此問題。 這是更新的JS：

$("#toggle").on('click touch', function(event){
    $(".nav-wrapper").toggleClass('open');
    return false;
});

***這不能解決所有網站的問題，僅適用於某些網站。