Materializecss - モバイルでボタンが動作していないタブ

Question

モバイルビューで問題が発生しました。materializecssです。要するに、デスクトップ上で私のコード（下記参照）は正常に動作しています。 dev tools（F12）を実行し、このビューのCTRL+SHIFT+M/Toggle Deviceツールバー（モバイルデバイスビューをシミュレートする）ボタンを選択すると、作業が停止します（別のタブに移動するはずです）。どんな解決策ですか？ https://share.viewedit.com/QFQ7LrdFW8iXXzJ2ZWbzSs

の作業例：https://codepen.io/anon/pen/VzKYEx

<div class="row"> 
    <div class="col s12"> 
     <ul class="tabs "> 
      <li class="tab col s3"><a href="#connect">x1</a></li> 
      <li class="tab col s3"><a href="#login">x2</a></li> 
      <li class="tab col s3"><a href="#register">x3</a></li> 
     </ul> 
    </div> 
    <div id="connect" class="col s12"> 
     <div class="valign-wrapper center-align" id="connect" data-section="connect"> 
    <div class="valign"> 
     <div class="container"> 

      <img class="logo" src="{{ asset('assets/images/logo.png') }}" alt="logo dimesion"> 
      <div class="buttons"> 
       <div class="row"> 
        <div class="input-field col s10 push-s1"> 
         <button class="btn waves-effect waves-light btn-large btn-orange btn-block" 
           data-show-tab="login" 
           type="button" 
           name="action">go_to_x2</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
    </div> 
    <div id="login" class="col s12"> 
     x2 
    </div> 
    <div id="register" class="col s12"> 
     x3 
    </div> 
</div> 

JS：

var $page = $('body'); 
var $tabs = $page.find('ul.tabs'); 
$tabs.tabs({swipeable: true}); 

    $page.find('[data-show-tab]').on('click', (e) => { 
     var tab = $(e.target).attr('data-show-tab'); 
     $tabs.tabs('select_tab', tab); 
    }); 

SCSS：

@import 'compass/css3'; 

.valign-wrapper { 
    overflow-x: hidden; 
    width: 100%; 
    height: 100%; 
    position: absolute; 

    & .valign { 
    width: 100%; 

    &.height100 { 
     height: 100%; 
    } 
    } 

    &#connect { 
    background-color: white; 
    color: black; 

    & .logo { 
     position: absolute; 
     margin: auto auto; 
     top: 20vh; 
     left: 0; 
     right: 0; 
    } 

    & .buttons { 
     bottom: 40px; 
     left: 0; 
     position: absolute; 
     width: 100%; 
    } 
    } 
} 

.carousel { 
    height: 100% !important; 
    position: absolute; 

    & .carousel-item { 
    height: 100%; 
    } 
} 

Answer 1

問題のデモとワイド

それはmaterializecss、タブのバグですか？

とにかく、部分的な解決策は、タブ上でswipeableを無効にすることです。

$tabs.tabs({swipeable: false}) 

Answer 2

あなたのこれはmaterializecss上でアクティブな問題である "materialize.js"

function setupEvents() { 
     if (typeof window.ontouchstart !== 'undefined') { 
     view[0].addEventListener('touchstart', tap); 
     view[0].addEventListener('touchmove', drag); 
     view[0].addEventListener('touchend', release); 
     } 
     view[0].addEventListener('mousedown', tap); 
     view[0].addEventListener('mousemove', drag); 
     view[0].addEventListener('mouseup', release); 
     view[0].addEventListener('mouseleave', release); 
     view[0].addEventListener('click', click); 
    } 
}