Fixed nav et problème de scroll sous IOS (iPhone SE)

Bonjour,

Etant un peu largué avec CSS et plus particulièrement les navigations "hamburger", j'ai emprunté un code que j'ai retravaillé pour mon site. La navbar fonctionne parfaitement bien sur desktop avec redimensionnement du navigateur. Idem sous tablette. Le problème vient de l'iPhone (un SE) : je n'arrive pas à scroller le menu lorsqu'il se déploie. Pis, je n'arrive pas à cliquer le dernier lien du menu de navigation encore visible sur l'écran du smartphone, les autres liens n'étant pas accessibles par le scroll.

.navBar{
	background-color: #292929;
	position: fixed;
	min-width: 100%;
	border-bottom: solid 5px #BF9B30;
	z-index: 1;
}

nav ul{
	display: flex;
	justify-content: space-between;
	list-style-type: none;
	width: 50%;
	text-transform: uppercase;
}

nav ul a{
	color: #BBC3C8;
	text-decoration: none;
	transition: all .5s ease;
}

nav ul a:hover{
	color: #BF9B30;
}

nav li{
	display: inline-block;
}

nav #menu-toggle{
	display: none;
}

nav .label-toggle{
	display: none;
}

nav .wrapper{
	align-items: center;
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 768px){
	
	nav nav ul a {
		color: #BBC3C8;
	}
  
	nav ul{
		background-color: #292929;
		display: block;
		height: 0;
		list-style-type: none;
		opacity: 0;
		text-align: center;
		transition: all 1s ease;
		width: 100%;
		visibility: hidden;
	}
	
	nav li{
		border-bottom: 2px solid #BF9B30;
		color: #53354A;
		display: block;
		font-size: 1.5em;
		padding: 1.5em 0;
	}
	
	nav #menu-toggle:checked ~ ul{
	    opacity: 1;
		height: 100vh;
		visibility: visible;
	}
  
	nav .label-toggle{
		background: linear-gradient(to bottom, #BF9B30 0%, #BF9B30 20%, transparent 20%, transparent 40%, #BF9B30 40%, #BF9B30 60%, transparent 60%, transparent 80%, #BF9B30 80%, #BF9B30 100%);
		cursor: pointer;
		display: block;
		float: right;
		height: 35px;
		margin-top: 1em;
		width: 35px;
	}
	
	nav .wrapper {
	  display: block;
	}
}

et HTML qui va bien

<nav class="navBar">
		<nav class="wrapper">
			<div class="logo"></div>
			<input type="checkbox" id="menu-toggle" />
			<label for="menu-toggle" class="label-toggle"></label>
			<ul>
				<li><a href="index.html">Accueil</a></li>
				<li><a href="content/dccomics/dccomics.html">DC Comics</a></li>
				<li><a href="#">Marvel</a></li>
				<li><a href="#">Dynamite</a></li>
				<li><a href="content/zenescope/zenescope.html">Zenescope</a></li>
				<li><a href="#">Autre</a></li>
				<li><a href="#">Perso.</a></li>
			</ul>
		</nav>
	</nav>

J’ai également constaté des problèmes similaires.
En gros position: fixed ne semble pas fonctionner correctement sous Safari iOS.
Cela m’a conduit à imaginer un design différent. Je te conseillerais de faire de même, il est souvent vain de s’obstiner dans des voies sans issue, même si c’est agaçant.

Bonjour,

Effectivement, j'ai farfouillé sur de nombreux forum, il semble bien que fixed pose problème... J'avais espéré que depuis ce bug qui date, une solution avait été trouvée.

Bonjour,

Ce ne sont pas tout à fait des bugs, mais plutôt des philosophies différentes (qu'est-ce que l'écran, qu'est-ce que le viewport, etc.).

Amicalement,

C’est la différence entre un "bug" et une "anomalie".
Un bug : rien ne marche
Une anomalie : ça ne marche pas conformément aux attentes de l’utilisateur

Quand on fait un développement pour un groupe restreint d’utilisateurs’ une anomalie signifie que le développeur a mal compris les besoins des utilisateurs. Quand on fait un développement pour des millions d’utilisateurs c’est le développeur qui fixe la norme.
Ça marche tant qu’on a assez d’utilisateurs.
C’est ce qui s’est passé pendant des années avec Microsoft, jusqu’à ce que IE tombe à quelques % d’utilisateurs.

J’ai d’ailleurs eu l’illustration de cette situation lundi soir: deux membres de l’association m’ont signalé une "anomalie" sur le site. Après enquête je leur ai recommandé de ne plus utiliser IE....
Modifié par PapyJP (30 Jan 2019 - 13:48)