モバイルWebタップの背景色ですか？

Question

ウェブアプリでタップの背景色効果を実現したいのですが、ネイティブアプリのように（iOS向けのGmailのように - クリックしてメールをクリックすると、背景が青色で強調表示されます）。

CSS：アクティブな作品はAndroidで素晴らしいです。

iOS 9.3では、リンゴが350msのタップ遅延を削除しました。これは私が完全に驚いたことを知りました！私は興奮してfastclick.jsを削除しました。しかし、ユーザーがタップすると、アクティブなものはまったく動作しないようです！彼らの開発者フォーラムは冗談です。誰も気にしない。

もう一度fastclick.jsを追加してみました。iOS上で再びアクティブになりますが、その後はスクロールでトリガされます。

おそらく50msの遅延があるため、リンクをタップするとハイライト表示されます。

私はこのCSSは、この目的のために意図されていることを考えた：

-webkit-tap-highlight-color: #eee; 

しかし、私は（iOSの9.3のSafariで）これを使用しようとすると、それは要素上のすべてのコンテンツ（テキスト）をカバーし（要素全体が完全に灰色、テキスト、すべてに変わります）。何か不足していますか？これを使用すると、div /要素の内容全体が覆われるのはなぜですか？その一般的な使用法は背景色ではないでしょうか？

更新：私は自分のソリューションを下にロールバックしました。これは、Webアプリケーションを使って作業している人々に役立ちます。

Answer 1

まず、アクティブ：私が言うことができる限り、アンドロイド用のクロムでうまく動作します。彼らはOSレベルで遅延を実装しているようです。

2番目：前述のとおり、iOS用にfastclick.jsを追加してみました。アクティブであっても動作します。それが追加されれば、私は少なくともアクティブに働くことができましたが、スクロールしようとするとアクティブになります。だから、

、Appleは第二級市民のようなWebアプリケーションを扱うので、これは私が私の生産アプリで使用しているものです：

CSS：

// Android (or anything else, which I'm not really concerned about) 
// Simply use CSS! Android has built in delay to prevent trigger on scroll 
body:not(.ios) { // Adding a body class using Rails 'browser' gem 
    .list a:active { 
    background-color: #f5f5f5; 
    } 
} 

// iOS only. :active would trigger on scroll (Apple treats web apps like 2nd class citizens) 
body.ios { 
    .list a.touch { 
    background-color: #f5f5f5; 
    } 
} 

のJavaScript/jQueryの：

// iOS only 
// Roll our own delay so background color doesn't trigger on scroll 
if(navigator.userAgent.match(/(iPad|iPhone)/g) != null) { 

    var addTouch; 
    $('.list a').on('touchend', function() { 
    $(this).removeClass('touch'); 
    clearTimeout(addTouch); 
    }).on('touchmove', function() { 
    $(this).removeClass('touch'); 
    clearTimeout(addTouch); 
    }).on('touchstart', function() { 
    var that = $(this); 
    addTouch = setTimeout(function() { 
     that.addClass('touch'); 
    }, 40); 
    }); 
} 

この声明でこの解決策を完了させてください。これは絶対にばかげています。アップル - 350msのタッチディレイを削除していただきありがとうございます：素晴らしい！しかし、CSSを修正してください：Googleと同じように、スクロールが可能なようにアクティブにしてください。