SlideToggleに関しまして

Question

SlideToggleに関しまして、
レスポンシブデザインの為、PCでブラウザを縮めてSlideToggle(ハンバーガーメニュー)をクリックすると正常です。
実機アンドロイド端末で確認しても正常です。
しかしiPhoneの5sと7で確認するとSlideToggle(ハンバーガーメニュー)が開きません。
主要ブラウザ全て同じ状態です。
これはiOSの問題なのでしょうか。

この文章だけでは伝わらない部分もあるかと思いますが、何かこの原因が分かる方がいらっしゃいましたら、ご教示頂けますと幸いでございます。

何卒よろしくお願い申し上げます。

Comments

[kszk311]

SlideToggleに関連しているJSの処理、またHTMLやCSSなどのソースと、Safariのバージョンを教えてもらえますか。

[kszk311]

CSSで「cursor」を「pointer」にすると解決するかもですね。http://blog.roundrop.jp/show/28

[hhhhhhhhhhhh]

ご返信ありがとうございます。既にpointerになっていた為、解決に至りませんでした。

[hhhhhhhhhhhh]

$(function(){ $(".linebox").click(function(){ $(".line01").toggleClass("lineclick01") }); $(".linebox").click(function(){ $(".line02").toggleClass("lineclick02") }); $(".linebox").click(function(){ $(".line03").toggleClass("lineclick03") }); }); $(document).ready(function() { $('.linebox').on('click', function() { $(".menu").slideToggle(); }); return false; });

[hhhhhhhhhhhh]

/*三本線*/ .linebox{ width:25px; height:25px; top: 25px; right:25px; position:fixed; cursor:pointer; overflow:hidden; z-index:9999 } .linebox .line01{ width:25px; height:2px; background-color: #494949; top:0px; position:absolute } .linebox .line02{ width:25px; height:2px; background-color: #494949; top:8px; position:absolute } .linebox .line03{ width:25px; height:2px; background-color: #494949; top:16px; position:absolute } /*アニメーションの動きの指示*/ .linebox .line01 , .linebox.line02 , .linebox .line03{ transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; /* Opera */ -moz-transition: all 0.5s ease-out; /* Firefox */ -webkit-transition: all 0.5s ease-out; /* GoogleChrome, Safari */ -ms-transition: all 0.5s ease-out /* IE */ } /*クリックした後の動きを指示*/ .linebox .lineclick01{ top:8px; -o-transform: rotate(405deg); -moz-transform: rotate(405deg); -webkit-transform: rotate(405deg); -ms-transform: rotate(405deg); transform: rotate(405deg) } .linebox .lineclick02{ background-color:rgba(255,255,255,0) } .linebox .lineclick03{ top:8px; -o-transform: rotate(-405deg); -moz-transform: rotate(-405deg); -webkit-transform: rotate(-405deg); -ms-transform: rotate(-405deg); transform: rotate(-405deg) }

[kszk311]

質問文に、codeブロックで囲んで記載してください…。https://teratail.com/help#about-markdown

[hhhhhhhhhhhh]

<!--drawer-->
<div class="linebox">
<div class="line01"></div>
<div class="line02"></div>
<div class="line03"></div>
</div>

<ul class="menu">
<li><a href="index.html">ホーム</a></li>
<li><a href="#works">業務のご案内</a></li>
<li><a href="#visit">見学のお申込み</a></li>
<li><a href="#access">アクセス</a></li>
<li><a href="#company">会社案内</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>

[hhhhhhhhhhhh]

申し訳ありません。ありがとうございます。追記し直させていただきます。少々お待ちください。

[hhhhhhhhhhhh]

-

[hhhhhhhhhhhh]

-

Answer 1

結構有名な現象らしいですね。ここらへんを参考にしてみてはどうでしょうか。
https://qiita.com/38kun/items/ce6a26c9c59612e6f515
https://qiita.com/kmt/items/c6cc207b6ab451c5d022

Answer 2

原因も何も、iOSとアンドロイドのブラウザの動作の違い、ってだけかと。
世の中のすべてのブラウザはすべて動作が同じ、ってわけではないのです。

Comments

[hhhhhhhhhhhh]

皆様

ご返信いただき、ありがとうございます。
ご教示いただいた手段を試してみたのですが、改善されない状態です。

PCを使用してWindows、Mac共に主要ブラウザは問題ございません。
アンドロイド端末も問題ございません。
iPhoneでのみで問題が発生している状態です。

引き続きよろしくお願いいたします。