Mi función jQuery toggleclass está creando un efecto de hipervínculo en dispositivos con pantalla táctil

He usado jQuery para agregar un efecto de transición CSS cuando el mouse se desplaza sobre el encabezado de mi sitio, lo que hace que pase de ser transparente a un fondo blanco. Tengo un problema realmente extraño e inesperado en los dispositivos con pantalla táctil al agregar la clase adicional (.active)

Solo puedo suponer que esto sucede en todos los dispositivos con pantalla táctil, ya que solo tengo mi iPhone para probarlo, pero cuando toco el pulgar en el encabezado, todo el encabezado está cubierto en un rectángulo oscuro (como si fuera un hipervínculo que tenía Acabo de hacer clic).

Esto no solo parece muy extraño, sino que está arruinando la funcionalidad del sitio web porque ya no puedo tocar el logotipo / enlace de inicio o el botón dentro del encabezado.

He intentado varias reglas CSS dentro de una consulta de medios para detener esto, incluida la configuración de.active clase adisplay:none ypointer-events:none, pero nada ha podido solucionarlo.

ACTUALIZAR

Aquí está mi código de sitio web real. Hay mucho aquí, pero parece que no puedo replicar esto correctamente en un JSFiddle.

HTML:

<header class="header">
    <div class="header-container">
        <h5 class="logo" id="lucieaverill">LUCIE AVERILL</h5>
        <h5 class="logo" id="photography">PHOTOGRAPHY</h5>
    <div class="mobile-menu">
</header>       

CSS:

.header {
    width: 100%;
    height: 100px;

    position:absolute;
    top:0;
    z-index:2;

    transition: all 0.4s;

    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}


.header.active {
    background-color:#fff;
}

.header-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    justify-content: space-between;
    -webkit-justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;

    height:inherit;
    width:85%;
    max-width:1600px;
    overflow:hidden;
}

a.logo {
    height:15px;
    font-family: ProximaNovaW01-Bold, Arial, Helvetica, sans-serif;
    font-size:19px;
}

h5.logo#lucieaverill {
    color:#ffffff !important;
    transition: all 0.4s;
}

h5.logo#photography { 
    color:#ffffff !important;
    transition: all 0.6s;
}

h5.logo#lucieaverill.active {
    color:#3a3a3a !important;   
}

h5.logo#photography.active {
    color:#b2b3b3 !important;
    transition: all 0.3s;
}

Javascript:

jQuery(document).ready(function($){    

$(".header").hover(function(){
        $(".header, h5.logo#lucieaverill, h5.logo#photography").addClass("active");
    }, function(){  // Callback
        $(".header, h5.logo#lucieaverill, h5.logo#photography").removeClass("active");
    });
});

Respuestas a la pregunta(1)

Su respuesta a la pregunta