Désactiver le marquage div et span

Question

Sur les appareils mobiles lorsque j'appuie sur mon icône de hamburger, il y a une sorte de flou. Je ne veux pas que ce soit là.

est ici capture d'écran du problème:

Sur les appareils de bureau tout est ok. Mais sur les mobiles ou sur le simulateur d'appareils réactifs de Chrome quand j'appuie et que je tiens mon hamburger, il y a un flou.

Et voici mon code extrait:

$(document).ready(function() { 
 
    $(".hamburger").click(function(){ 
 
    $(this).toggleClass("is-active"); 
 
    }); 
 
});

.hamburger { 
 
    margin-top: 15px; 
 
} 
 
.hamburger .line{ 
 
    width: 25px; 
 
    height: 3px; 
 
    background-color: #ecf0f1; 
 
    display: block; 
 
    margin: 4px auto; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 
.hamburger:hover{ 
 
    cursor: pointer; 
 
} 
 
#hamburger-9{ 
 
    position: relative; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 
#hamburger-9.is-active{ 
 
    -webkit-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 
.noselect { 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
     -moz-user-select: none; 
 
     -ms-user-select: none; 
 
      user-select: none; 
 
    outline-style: none; 
 
    text-decoration: none; 
 
} 
 
#hamburger-9.is-active .line{ 
 
    width: 30px; 
 
} 
 
#hamburger-9.is-active .line:nth-child(2){ 
 
    opacity: 0; 
 
} 
 
#hamburger-9.is-active .line:nth-child(1){ 
 
    -webkit-transform: translateY(6px); 
 
    -ms-transform: translateY(6px); 
 
    -o-transform: translateY(6px); 
 
    transform: translateY(6px); 
 
} 
 
#hamburger-9.is-active .line:nth-child(3){ 
 
    -webkit-transform: translateY(-8px) rotate(90deg); 
 
    -ms-transform: translateY(-8px) rotate(90deg); 
 
    -o-transform: translateY(-8px) rotate(90deg); 
 
    transform: translateY(-8px) rotate(90deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hamburger noselect" id="hamburger-9"> 
 
    <span class="line"></span> 
 
    <span class="line"></span> 
 
    <span class="line"></span> 
 
</div>

Answer 1

Ceci est le point culminant du robinet de webkit probable: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color

* { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
} 

(à partir de votre capture d'écran)

Êtes-vous en utilisant transforme pour transformer le x d'un + par hasard?