CSSのみモーダルウィンドウAndroidではOK、iOSでは動作しません

Question

スマートフォンの画面の略語や記号に触れるときにタイトル属性を表示するためのCSSコードがあります。 「（最大幅：767px）のみ画面と@media」セクションの中で私のスタイルシートの私は、次のコードを持っている：

span[title]:active::after,abbr:active::after { 
 
    color: Maroon; 
 
    font-weight: bold; 
 
    content: 'Meaning: ' attr(title); 
 
    position: fixed; 
 
    top: 3ex; 
 
    left: 2ex; 
 
    display: block; 
 
    z-index: 100; 
 
    background-color: White; 
 
    box-shadow: .3ex .3ex .1ex Grey; 
 
    border: 1px solid grey; 
 
    padding: .4ex; 
 
    width: 70%; 
 
    height: auto; 
 
}

をそれはテストのAndroid -I'veに完璧に仕事をしますそれはChrome、Firefox、Samsungのブラウザで、そして私のiMacはChrome、Firefox、Safari、Operaでブラウザウィンドウの幅を拡張した後でテストしましたが、iOSではまったく動作しません。 '-webkit-transform：translate3d（0,0,0）;'を追加するトリック/回避策コードに追加してもこれには役立ちませんでした。 私はどんな助けにも感謝すべきです！ 本当にありがとうございます！

SOLVED！

次のリンクに提案されているように解決策を試しました。Enable CSS active pseudo styles in Mobile Safari とうまくいきます。問題は、Safari Mobileがデフォルトで有効な疑似クラスを無効にしていたことです。この単純な考え方で解決します。 私はbody ontouchstart = "" 'やそれに類するもののような他のいくつかの解決策を試しましたが、W3Cバリデーターに対してコードをチェックするときにエラーが発生しました。 回答して手伝ってくれたすべての人に感謝します！

Answer 1

:activeプロパティは、アクテイブエレメントに対してのみ機能します。 Documentation says:

要素は:activeなったり:focusを取得することが可能な文書言語又は実装固有の制限があってもよいです。

これを行うには最も簡単な事はあなたが活性化可能にしたい各要素に対して0にtabindex属性を設定することです。

これは、コードがキーボードで動作する大きな利点があります。

EDIT：すべての要素のtabindex=-1が

$("abbr[title]").attr("tabindex", -1); 

または標準のJavaScriptに

var ele=document.querySelectorAll("abbr[title]"); 
for (var i=0;i<ele.length;i++) { 
    ele[i].setAttribute("tabindex", -1); 
}