18034 sujets

Questions générales et questions de débutants

[Résolu] Display flex problème safari

Bonjour à tous et à toutes.
Je suis face à un problème de compatibilité avec safari. Je souhaite créer une page avec un logo et un lien en-dessous. Ce logo et ce lien sont les seuls éléments de cette page. J'ai utilisé le display flex afin de placer mes éléments au centre de ma fenêtre horizontalement et verticalement. ça fonctionne parfaitement sur chrome, firefox et IE. Cependant, je ne parviens pas à le centrer verticalement sur safari malgré les webkit. Vous auriez une astuce ? Voici mon code html et css : 

	<body>
		<div id="sectionIndexHtml"> 
				<div style="text-align:center;"><a href="fr/" title="bienvenue">
					<img src="img/logo.jpg" alt="logo " title="mon titre">
				</a><br>
				<a href="fr/" style="display:inline-block;">Bienvenue</a></div>
		</div>
	</body>



html,body{
	height:100%;
}
#sectionIndexHtml{
	height:100%;
	display: -webkit-flex; /* Safari */
	-webkit-align-items: center; /* Safari 7.0+ */
	display: flex; 
	align-items: center;
	justify-content:center;
}
#sectionIndexHtml div{ 
	-webkit-flex: 1;
	flex: 1;
}



merci d'avance
Modifié par gwenhadu (16 Jul 2015 - 16:31)
Administrateur
Bonsoir.

De tête, l'ancienne syntaxe pour safari est display: -webkit-box.

Il faudrait sue tu vérifies car je n'ai que mon Smartphone là.

Edit : de plus, je pense que ca fonctionnerait mieux sans le div interne qui ne sert pas à grand chose.
Modifié par Raphael (16 Jul 2015 - 22:34)
Bonsoir Raphaël
Merci pour ta réponse Smiley cligne En outre, cela ne fonctionne pas, je m'étais déjà renseigné sur ce point -webkit-box, mais cela n'a rien donné, mes essais ont échoué.
Pour le div interne, je me suis inspiré de l'exemple de http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_align-items . Cependant, leur exemple n'est pas correct. L'effet attendu sous chrome, firefox et IE fonctionne parfaitement, mais pas sous safari !!
Une autre astuce ? Smiley smile
merci d'avance
Modifié par gwenhadu (16 Jul 2015 - 23:19)
Administrateur
Dans ce cas il faudrait investiguer sur les anciennes syntaxes de align-items et justify-content.
Tu es allé voir les syntaxes sur le tuto alsacreations ?

Tu n'as pas la possibilité d'utiliser Autoprefixer pour être sûr d'avoir toutes les syntaxes nécessaires?

EDIT : je viens de tester sur Safari 8.07 la page suivante et cela fonctionne bien : http://codepen.io/raphaelgoetter/pen/PqBbVQ

(pour voir les préfixes, il faut cliquer sur "view compiled" dans la partie CSS)
Modifié par Raphael (17 Jul 2015 - 08:44)
Administrateur
Raphael a écrit :
Dans ce cas il faudrait investiguer sur les anciennes syntaxes de align-items et justify-content.
Tu es allé voir les syntaxes sur le tuto alsacreations ?

Tu n'as pas la possibilité d'utiliser Autoprefixer pour être sûr d'avoir toutes les syntaxes nécessaires?
Quelqu'un que je connais bien© m'avait conseillé http://pleeease.io/play/ Smiley ravi
Et si la compat. par défaut ne convient pas, "Safari >= 7" et la doc de Browserslist
Administrateur
Tu peux préciser ce que tu as modifié pour que ça fonctionne?
C'était les préfixes ?
désolé !! je n'ai pas l'habitude Smiley cligne
J'ai suivi tes conseils et repris ton exemple depuis codepen. ça fonctionne parfaitement. Du coup, c'était bien un problème de préfix.
Encore merci Smiley cligne
Sujet clos
Aller à