Ich habe jQuery verwendet, um einen CSS-Übergangseffekt hinzuzufügen, wenn der Mauszeiger über die Kopfzeile meiner Website bewegt wird und diese von transparent auf einen weißen Hintergrund wechselt. Beim Hinzufügen der zusätzlichen Klasse tritt auf Touchscreen-Geräten ein sehr merkwürdiges und unerwartetes Problem auf .active).

Ich kann nur davon ausgehen, dass dies auf allen Touchscreen-Geräten der Fall ist, da ich nur mein iPhone zum Testen habe. Wenn ich jedoch mit dem Daumen auf die Überschrift tippe, wird die gesamte Überschrift in einem dunklen Rechteck verdeckt (als wäre es ein Hyperlink) war gerade angeklickt worden).

Dies sieht nicht nur sehr seltsam aus, sondern beeinträchtigt auch die Funktionalität der Website, da ich nicht mehr auf das Logo / den Home-Link oder die Schaltfläche in der Kopfzeile tippen kann.

Ich habe verschiedene CSS-Regeln innerhalb einer Medienabfrage ausprobiert, um dies zu stoppen, einschließlich des Festlegens des.active Klasse zudisplay:none undpointer-events:none, aber nichts konnte es beheben.

AKTUALISIERE

Hier ist mein tatsächlicher Website-Code. Es gibt eine Menge hier, aber ich kann es nicht richtig in einem JSFiddle replizieren.

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