Раскрывающееся меню внутри панели навигации не работает должным образом на устройствах Apple с сенсорным экраном и в нек ⇐ CSS

[Anonymous]

ЗДЕСЬ приведен код, который я скопировал с w3schools.com, чтобы создать раскрывающееся меню, доступное для щелчка, внутри панели навигации.
Он работает нормально в любой настольной ОС (я пробовал MacOS и Ubuntu) и любой браузер (я пробовал Safari и Firefox), но проблема возникает с устройствами Apple с сенсорным экраном.
Нажатие на раскрывающееся меню раскрывает параметры, но свернуть его невозможно, если не нажать на него. параметры или другие элементы панели навигации.
Нельзя нажать на любое другое место экрана, чтобы свернуть раскрывающееся меню.

Я пробовал на iPhone 11 Pro Max и iPad mini 4 последней версии iOS и браузеры Safari, Opera и Chrome.

Также протестировано на двух мобильных телефонах Android, и они работают нормально, как и ожидалось.
Есть ли что-нибудь? Меня не хватает в коде?

Код: Выделить всё

.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
background-color: red;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #ddd;
}

.show {
display: block;
}





[url=#home]Home[/url]
[url=#news]News[/url]

Dropdown
[i][/i]


[url=#]Link 1[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]




Dropdown Menu inside a Navigation Bar
Click on the "Dropdown" link to see the dropdown menu.


/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}

Подробнее здесь: https://stackoverflow.com/questions/786 ... e-touchscr