26744 sujets

CSS et mise en forme, CSS3

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)
En fait, je viens de tester sur un android, idem, ça ne scrolle pas. Je suis bon pour reprendre toute ma navigation Smiley bawling
Nono72 a écrit :
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 Tutuapp 9apps Showbox


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

Interestingly the problem doesn't show up in Firefox for iOS. So annoying for those of us who like to maintain total control over how things are displayed to users.

The only site I've come across that has a fixed bar at the top which doesn't succumb to this issue is http://money.cnn.com/. But when I try to emulate an iOS device using the desktop version of Chrome's device emulator in the developer tools it doesn't show the same mobile experience I get on my iPhone so I'm unable to inspect the elements to see how they do it. Frustrating.
Since Apple doesn't allow custom browser engines on ios, both firefox and chrome on ios are actually just different frontends for the safari's browser engine (wkwebview). So it's a bit strange if the problem doesn't happen in firefox (but maybe they're doing something differently).
Also, the device emulation in chrome sets viewport, user agent etc. but it doesn't emulate the actual browser engine. So to run the inspector on an i-device you'll need a mac to run the dev tools or the emulator, both of which are only available for OSX
Modifié par Kingbilo (03 Feb 2019 - 08:00)