CSS3ドロップダウンメニューとiOSの問題

Question

いくつかのCSS3トランジションを含むナビゲーションメニューをドロップダウンしようとしています。ただし、表示/非表示を使用すると、iOSはドロップダウンを表示しません（リンクに行くだけです）。 none/block表示を使用すると、iOSは親要素の最初のクリック時にドロップダウンメニューを表示しますが、どのブラウザでも遷移は機能しません。

javascriptを使用せずにこれらのトランジションをブラウザで正しく機能させる方法とドロップダウンをiOSで動作させる方法はありますか？

ドロップダウンは、iOSで動作しません：

nav ul li ul { 
    position: absolute; visibility: hidden; opacity: 0; left: 0; top: 50px; z-index: 99; 
    -webkit-transition: all .35s ease-in-out; 
    -moz-transition: all .25s ease-in-out; 
    -o-transition: all .35s ease-in-out; 
    -ms-transition: all .35s ease-in-out; 
    transition: all .35s ease-in-out; 
} 
nav ul li:hover > ul { visibility: visible; opacity: 1; top: 40px; } 

遷移は、ブラウザでは動作しません：

nav ul li ul { 
    position: absolute; display: none; opacity: 0; left: 0; top: 50px; z-index: 99; 
    -webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    -moz-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    -o-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    -ms-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    transition: opacity .35s ease-in-out, top .35s ease-in-out; 
} 
nav ul li:hover > ul { display: block; opacity: 1; top: 40px; } 

Answer 1

はもう少しこのことについて考えた後、私は私が見ていない文書を見つけましたあなたが経験している奇妙さのいくつかは、デフォルトでインタラクティブではないもの（アンカーとフォーム要素のみがクリック可能）上の擬似要素に振る舞いを付けているためかもしれません。

http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html

（私はあなたがリスト項目の代わりに、アンカーを使用していたのを忘れ... event.preventDefaultについての私の元のコメントを無視します。）

私は、しかし、まだJSが最善の方法だと思いますあらゆる種類の要素に関連付けられたイベントについて非常に具体的なことができるからです。 CSSクラスを適用するだけで、既に指定した遷移プロパティを使用します。あなたは余分な素晴らしいになりたい場合は、リスト項目にtabIndex="0"を追加することで、それはキーボードでアクセス作ることができる

// CSS 
nav ul li > ul.visible { display: block; opacity: 1; top: 40px; } 

// JS 
// you could bind mouseover/out here too if you want it to work on both desktop & mobile 
$('nav ul li').bind('click', function(){ 
    $(this).children('ul').toggleClass('visible'); 
}); 

:)

Answer 2

私はこのための解決策を見つけた：このように

。基本的には、iosは、表示されているもの（ブロック/なしまたは可視性：非表示/可視）の場合、クリックをホバーにバインドしません。したがって、不透明度をサポートしていない< = ie8を補うために、左を使ってドロップダウンを「隠す」必要があります。

だから、基本的にマイナーな微調整を使用して第二の例を使用します。

nav ul li ul { 
    position: absolute; opacity: 0; left: -888em; top: 50px; z-index: 99; 
    -webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    -moz-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    -o-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    -ms-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    transition: opacity .35s ease-in-out, top .35s ease-in-out; 
} 
nav ul li:hover > ul {opacity: 1; top: 40px; left:0;} 

それからちょうどあなたのトランジションで「すべて」を使用しないようにしてくださいか、それは同様に左の属性をアニメーション化します:) だけの問題この方法では、あなたのトランジションは途中でしか動かないということです。