1485 sujets

Web Mobile et responsive web design

[Résolu] Position:fixed sur Safari/iPhone

Bonjour
J'ai une <div> en position:fixed qui marche correctement en simulation de mobile sur FireFox/PC.
Sur Safari/iPhone, je constate que cette <div> se comporte comme si elle était en position:absolute, c'est à dire que si je fais défiler la page verticalement elle remonte.
Avez vous constaté une situation similaire?
Est-ce lié au fait que body> est défini en height:100% ?
Connaissez vous une solution à ce problème ?

Merci de votre aide.
Modérateur
Bonjour,

Les utilisations de fixed sont truffées d'effets de bord de toutes sortes.

EDIT: Je n'arrive pas à reproduire le bug sur mon iphone avec le code suivant :

body {
height:100%;
}
nav {
position:fixed;
top:0;
left:0;
width:100%;
height:2rem;
line-height:2rem;
background:#ff0;
}
h1 {
margin-top:2.5rem;
}



<h1>Fixed</h1>
<nav>Argh</nav>
<p>Long texte ici</p>

Il doit y avoir autre chose qui produit l'effet de bord.

Amicalement,
Modifié par parsimonhi (29 Dec 2018 - 01:00)
Oui, c’est un peu plus compliqué : la page contient un <iframe> et c’est dans cet <iframe> qu’il y a une <div> en fixed. Il est à peu près évident que c’est ça qui fait que Safari se mélange les pinceaux.
Je vais changer de design
Voici la structure de la page, telle que je suis en train de la constituer dans mes opérations de mise en "responsive":

<body>
	<div id="container">
		<header></header>
		<nav id="menu"></nav>
		<iframe id="content"></iframe>
	</div>
	<footer></footer>
</body>

le "container" permet de limiter la largeur de la page sur les très grands écrans
le <header> contient le logo
"menu" contient bien entendu le menu
<iframe> contient les pages appelées par le menu
le <footer> est en fixed, c'est pourquoi il est en dehors du "container".

Cette page revêt 4 aspects:
aspect 1 : Page d'accueil pour écran large :
upload/1546086397-48769-slide.png
aspect 2 : Page d'affichage pour écran large:
upload/1546086446-48769-frame.png
aspect 3 : Page d'accueil pour petit écran :
upload/1546086500-48769-list.png
aspect 4 : page d'affichage pour petit écran
upload/1546086533-48769-list1.png
Ces 4 aspects sont gérés par Javascript et CSS, on a toujours les mêmes éléments, mais ils sont visibles ou non, positionnés différemment, etc selon l'aspect.
Dans "aspect 4", on voit qu'en raison de la petite taille de l'écran il n'y a aucune autre information que la date sur chacun des évènements du calendrier. Il faut cliquer sur le bouton pour afficher le détail :
upload/1546093128-48769-event.png

C'est pour cette dernière opération que j'ai un problème avec Safari.
Si vous voulez essayer, l'adresse de la page d'accueil est https://tests.alma-musica.net
Pour afficher le calendrier, c'est l'entrée "Activités/Calendrier"
Je ne garantis pas que cela marchera si vous essayez, je suis en plein développement et je fais des changements en permanence.
J’ai essayé avec Firefox sur iPhone : même résultat
Je vais mettre la <div> d’affichage de l’événement en absolute.
Après mise au point, j'obtiens les résultats suivants:
Affichage de la page "calendrier" (j'ai changé la couleur de fond des boutons en fonction de la nature de l'évènement).
upload/1546105625-48769-list2.png
Si on clique sur l'évènement "concert", l'affichage se fait eh haut de la "zone du mois" :
upload/1546105657-48769-list3.png

Moralité: être prudent avec les éléments "fixed" dans un <iframe> !!
Sujet clos
Aller à