當我在我的html頁面上選擇文本時,隨后點擊導航條鏈接會反復選擇和取消選擇文本。這是在裝有最新版本android的三星設備chro me(最新版本)上測試的。我附上一個片段來理解這個問題。請在Android設備上運行該片段來驗證問題。
function goTo(){}
nav {
padding: 10px 20px 15px 0;
height: calc(45px + 1vw);
justify-content: center;
user-select: none; /* rende testo non selezionabile */
-moz-user-select: none; /* firefox */
-webkit-user-select: none; /* Chrome, Opera and Safari*/
-ms-user-select: none; /* IE, ms-edge */
flex-direction: column;
align-items: end;
background-color: #040405;
position: relative;
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: .3s ease;
z-index: 1;
}
nav.light {
background-color: #EDE8DD;
}
nav ul li {
display: inline-block; /* allinea orizzontalmente i link della navbar */
padding-left: calc(15px + 1vw); /* padding a sinistra di ogni link della navbar */
}
nav a {
color: #A2A2A4 !important;
text-decoration: none; /* elimina elementi decorativi dei link presenti di default */
position: relative;
transition: all .3s ease; /* transizione cambio colore onHover e colore sfondo */
cursor: pointer;
font-size: calc(10px + 0.8vw);
background-color: transparent;
-webkit-tap-highlight-color: transparent; /* evita effetto pressione link */
}
nav.light a {
color: #575758 !important;
}
nav a.active {
color: #FEFEFE !important;
}
nav.light a.active {
color: #040405 !important;
}
nav a.active::before { /* rende visibile striscia sotto link attivo */
content: "";
position: absolute;
background-color: #d52d08;
border-radius: 20px;
height: 3px;
width: 100%;
left: 0;
bottom: -5px;
transition: .3s ease;
pointer-events: none; /* evita bug che rende la striscia cliccabile */
}
@media (hover : hover) {
nav a:hover::after { /* rende visibile striscia sotto link quando hover (dispositivi che lo permettono) */
content: "";
position: absolute;
background-color: #d52d08;
border-radius: 20px;
height: 3px;
width: 100%;
left: 0;
bottom: -5px;
transition: .3s ease;
pointer-events: none; /* evita bug che rende la striscia cliccabile */
}
}
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Esame di stato</title>
</head>
<body>
<nav id="menu">
<ul>
<li><a id="home" class="active" onclick="goTo(id)">Home</a></li><!--
--><li><a id="educazione_civica" onclick="goTo(id)">Educazione civica</a></li><!--
--><li><a id="pcto" onclick="goTo(id)">Pcto</a><!--
--><li><a id="materie" onclick="goTo(id)">Materie</a>
</li>
</ul>
</nav>
<p style="margin-top: 100px;">Select this text and then if you click on the navbar links the text will be selected and deselected by itself</p>
<p>This only happens on android</p>
</body>
</html>