Mobile Web Tap Hintergrundfarbe?

Question

Ich möchte einen Hintergrund-Farbeffekt auf meiner Web-App erzielen, ähnlich wie native Apps (z. B. Google Mail für iOS - wenn Sie auf eine E-Mail tippen, wird der Hintergrund in blauer Farbe hervorgehoben).

CSS: aktive funktioniert super auf Android.

Mit iOS 9.3 entfernte Apple die 350ms Tap-Verzögerung, die ich absolut begeistert fand! Ich entfernte fastclick.js mit Aufregung. Aber dann, wenn der Benutzer tippt: Aktiv scheint überhaupt nicht zu funktionieren! Ihre Entwicklerforen sind ein Witz. Keinen interessiert es.

Ich habe versucht fastclick.js wieder zurück, was macht: aktive Arbeit wieder auf iOS - aber dann löst es auf Scroll.

Nativ gibt es wahrscheinlich eine 50ms Verzögerung, so dass es nur hervorhebt, wenn Sie durch den Link tippen.

Ich dachte, dass diese CSS für diesen Zweck bestimmt ist:

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

Allerdings, wenn ich versuchen, dies zu verwenden (in Safari auf iOS 9.3) deckt es den gesamten Inhalt (Text) auf das Element nach oben Auch (das gesamte Element wird komplett grau, Text und alle). Fehle ich etwas? Warum wird der gesamte Inhalt des div/Elements bei der Verwendung abgedeckt? Wäre seine übliche Verwendung nicht die Hintergrundfarbe?

UPDATE: Ich habe meine eigene Lösung unten gerollt. Ich hoffe, dies hilft Menschen, die mit Web-Apps arbeiten.

Answer 1

Zuallererst: aktiv funktioniert gut auf Chrom für Android, soweit ich das beurteilen kann. Sie haben eine Verzögerung auf Betriebssystemebene implementiert, so scheint es.

Zweitens: Wie ich oben erwähnt habe, versuchte ich Fastclick.js für iOS zurück zu bekommen, um zu bekommen: aktiv sogar überhaupt zu arbeiten. Sobald das hinzugefügt wurde, konnte ich zumindest: aktiv arbeiten - aber es würde beim Scrollen aktiviert werden.

Also, weil Apple Web-Anwendungen wie 2. Klasse Bürger behandelt, ist es das, was ich in meiner Produktion App:

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); 
    }); 
} 

Lassen Sie mich diese Lösung mit dieser Aussage beenden: Das ist absolut lächerlich. Apple - vielen Dank für das Entfernen der 350ms Touch-Verzögerung: erstaunlich! Aber, fixiere CSS: aktiv, so ist das Scrollen möglich, genau wie bei Google.