JSFiddle - React, Tailwind, and code Playground

HTML

<!-- This jsfiddle is just intended to illustrate a behaviour, 
     the code is not important -->

<h2>Can't completely get rid of orange highlight when tapping on a link in a Phonegap 3.0 app on Android 4.1.2.</h2>
<p>
    When tapping on a link, both the link <b>and</b> one of the ancestor divs get the highlight. After setting -webkit-tap-highlight-color to transparent, an ancestor div still gets a highlight!
</p>
<div class="without">
    <div class="text">
        <b>Behaviour without setting -webkit-tap-highlight-color:</b>
    </div>
    <div class="container">
        <a class="link">Link 1</a>
        <a class="link">Link 2</a>
        <a class="link">Link 3</a>
        <a class="link">Link 4</a>
    </div>
</div>
<br>
<div class="with">
    <div class="text">
        <b>Behaviour with css <a href="http://phonegap-tips.com/articles/essential-phonegap-css-webkit-tap-highlight-color.html" target="_blank">hiding tap highlight color</a>:</b>
<pre>
* {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent; /* For some Androids */
}
</pre>
    </div>
    <div class="container">
        <a class="link">Link 1</a>
        <a class="link">Link 2</a>
        <a class="link">Link 3</a>
        <a class="link">Link 4</a>
    </div>
</div>

CSS

/* This jsfiddle is just intended to illustrate a behaviour, 
     the code is not important */

.link {
    display: block;
    padding: 5px;
}

.tapped {
    background-color: #f3b43b;
}

span.tap {
    padding-left: 10px;
    color: #999;
}

.container {
    border: 1px solid grey;
    padding: 10px;
}

JavaScript

/* This jsfiddle is just intended to illustrate a behaviour, 
     the code is not important */

setup($(".without"), true);
setup($(".with"), false);

function setup($case, showLinkTapped) {
    var $link = $(".link", $case).eq(1);
    var $tap = $("<span/>").addClass("tap").text("*tap*").hide();
    $link.append($tap);
    
    setInterval(function(){
        setTimeout(function() {
            $tap.show();
            
            if (showLinkTapped) {
                $link.addClass("tapped");
            }
            
            setTimeout(function() {
                $link.removeClass("tapped");
                $tap.hide();
                $(".container", $case).addClass("tapped");
                
                setTimeout(function() {
                    $(".container", $case).removeClass("tapped");
                }, 300);
            }, 300);
        }, 1000);
    }, 2000);
}