Minha função de toggleclass do jQuery está criando um efeito de hiperlink em dispositivos touchscreen

Eu usei o jQuery para adicionar um efeito de transição css quando o mouse passa o mouse sobre o cabeçalho do meu site, fazendo com que ele passe de transparente para um fundo branco. Estou tendo um problema realmente estranho e inesperado nos dispositivos touchscreen ao adicionar a classe adicional (.active)

Só posso supor que isso aconteça em todos os dispositivos com tela sensível ao toque, pois só tenho meu iPhone para testá-lo, mas quando bato meu polegar no cabeçalho, todo o cabeçalho é coberto por um retângulo escuro (como se fosse um hiperlink que tivesse acabou de ser clicado).

Isso não apenas parece muito estranho, como também está arruinando a funcionalidade do site, porque não consigo mais tocar no link do logotipo / home ou no botão dentro do cabeçalho.

Tentei várias regras CSS dentro de uma consulta de mídia para interromper isso, incluindo a configuração do.active classe paradisplay:none epointer-events:none, mas nada foi capaz de corrigi-lo.

ATUALIZAR

Aqui está o código do meu site real. Há muito aqui, mas não consigo replicar isso corretamente em um 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");
    });
});

questionAnswers(1)

yourAnswerToTheQuestion