macOS/iOS 10でSafariのpikabuメニューが表示されない

Question

私はWebページで作業しています.Pikabuを使ってサイドメニューを作成しました。問題は、クロム、ファイアフォックス、さらにエッジでも問題なく動作しますが、サファリでは機能しません。私はデスクトップ版とモバイル版の両方で試しました。私はPikabuにちょっと新しいので、問題を見つけるのに苦労します。問題は、私がサファリでページを開いたときに、私はものを見ることができないということです。ページは完全に白です。私はすでに互換性を確認し、Pikabuはsafari 10.0.2で動作するはずです。

はので、ここで私が問題を発見したようですが、縫い目ここに私のhtmlコード

<div class="pikabu-container"> 
     <!-- Overlay is needed to have a big click area to close the sidebars --> 
     <div class="pikabu-overlay"></div> 

     <div id="container"> 

      <div id="navigation-bar"> 
       <div class="navigation-icons"> 

        <a class="pikabu-nav-toggle" data-role="left"><i class="fa fa-bars" aria-hidden="true"></i></a> 

        .. some php code here 
        <a class="pikabu-nav-toggle" data-role="right"><i class="fa fa-info" aria-hidden="true"></i></a> 

       </div> 
      </div> 

      <div id="id1"></div> 

      <div id="id2"></div> 

      <!-- Additional controls --> 
      ... irrelevan php code 

</div> 

</div> 
<!-- the right sidebar --> 
<div class="pikabu-sidebar pikabu-sidebar--right"> 
     <!-- right sidebar content --> 
     <div class="container-content"> 
      <h2>Link</h2> 
      <div class="container-link"> 
       <ul> 
        <li> 
         <div class="icon"><i class="fa fa-globe" aria-hidden="true"></i></div> 
         <div class="content"><a href="#">Product Homepage</a><span>Visit the product homepage.</span></div> 
        </li> 
        <li> 
         <div class="icon"><i class="fa fa-youtube-play" aria-hidden="true"></i></div> 
         <div class="content"><a href="#">Youtube</a><span>View informative videos about the product.</span></div> 
        </li> 
       </ul> 
      </div> 

      <h2>Info</h2> 
      <div class="container-info"> 

      </div> 
     </div> 
</div> 

</div> 

ではJavaScript

jQuery(function() { 
     pikabu = new Pikabu(); 

     var open = false; 
       jQuery('#explode-footer-Button').click(function() { 
        if(open === false) { 
         if(Modernizr.csstransitions) { 
          jQuery('#explode-footer-Content').addClass('open'); 
         } else { 
          jQuery('#explode-footer-Content').animate({ height: '175px' }); 
         } 
         jQuery(this).css('backgroundPosition', 'bottom left'); 
         open = true; 
       info_check = false; 
        } else { 
         if(Modernizr.csstransitions) { 
          jQuery('#explode-footer-Content').removeClass('open'); 
         } else { 
          jQuery('#explode-footer-Content').animate({ height: '0px' }); 
         } 
         jQuery(this).css('backgroundPosition', 'top left'); 
         open = false; 
       info_check = true; 
        } 
       }); 
    }); 

Answer 1

です。私はWebインスペクタで遊んでいたとき、div.pikabuコンテナの高さが0になっていることに気付きました。これが画面上に何も表示されなかった理由です。私は解決策のためにここにStackOverflowの上で検索すると、これは

をスレッド見つけpikabuはサファリでうまく行っていない理由はここに Pikabu - Miscalculating Height

、ここで（ソリューションのAutoreにはhaxxxtonで）説明されていますが、解決策を見つけるでしょうそれは、（溶液のAutoreにはジャイある） Mobile Safari $(window).height() URL bar discrepancy

私は5月のjsスクリプトにこれを追加この問題を修正するために私のために働いた

var heightCorection = window.innerHeight ? window.innerHeight : $(window).height(); 

jQuery('.pikabu-viewport').height(heightCorection); 
jQuery('.pikabu-container').height(heightCorection);