28172 sujets

CSS et mise en forme, CSS3

[Résolu] FLEX ne rend pas pareil sous IOS

Bonjour!

J'ai fait un site sous WordPress pour le salon de tatouage de mon amie, visible ici.

Le site est comme prévu sur desktop et android mais sous IOS j'ai l'impression que le 
display: flex
ne fonctionne pas de la même façon... Comme s'il faisait un 
justify-content: space-between
sur des éléments qui n'existent pas.

Et le problème ne vient pas exclusivement de Safari puisqu'on a installé Chrome sur l'Ipad de mon amie et le problème est le même...

Voici le code en question:


.header {
  margin-top: 25px;
  margin-bottom: 6rem;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  justify-content: space-evenly;
  -webkit-jusitfy-content: space-evenly;
}
@media (max-width: 599px) {
  .header {
    margin-bottom: 0;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .header {
    margin-bottom: 2em;
  }
}
@media (min-width: 900px) {
  .header {
    margin-bottom: 4em;
  }
}
.header .logo {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  transition: all 0.6s ease-in;
}
@media (min-width: 900px) {
  .header .logo {
    text-align: center;
  }
}
@media (max-width: 599px) {
  .header .logo {
    text-align: center;
  }
}


J'ai essayé de jouer avec les 
-webkit-
et autres choses mais rien n'y fait, je m'y prend mal mais je ne vois pas où Smiley sweatdrop

Est-ce que quelqu'un a déjà été confronté à ce problème?
Merci d'avance pour votre temps!
Salut,

J'ai consulté ton site avec Safari sur mon iPhone, et il y a effectivement un énorme espace au-dessus et en dessous de l'image de ton header. Il y a uniquement ce souci là où il y en a d'autres sur le site ?

Je joins la capture d'écran ci-dessous, ça pourrait sûrement aider les autres (car j'ai pas d'idée d'où ça peut venir... Smiley sweatdrop )

upload/1617644494-68566-img4549.png
Modérateur
Bonsoir,

Sans avoir Safari sous la main, je peut te proposer quelques pistes de tests pour vérifier que cela n'a rien à voir avec un contexte de formatage perturbé dans Safari (cela ressemble aussi a des bug d'IE11 et flex).

- ajouter un min-height:0; au header en flex et/ou a div.logo
- ajouter un flex-shrink:1; aux images
- retirer transform:rotate() aux logo_image1
- retirer filter aux logo_image1

L'idée est de débusqué le fauteur de troubles et ensuite de voir si l'on peu avoir une méthode/approche différente pour un résultat équivalent(pas le bug hein Smiley cligne ).

En gros safari utilise la veritable hauteur de ton image avant de la redimensionnée (peut-être simplement faire un reset sur height au lieu de width:20em)

Cdt,
Modifié par gcyrillus (05 Apr 2021 - 22:37)
Bonjour,

Problème avec Webkit
J'ai le même problème avec safari sur Mac OS

il suffit de rajouter
" align-items: flex-start "


.header .logo {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  transition: all 0.6s ease-in;
align-items: flex-start
}


j'ai remarquer aussi que tu declare la même feuille css 2 fois. Ce qui pose des problèmes quand on veut débuggé
Modifié par BYJMG (06 Apr 2021 - 09:59)
Meilleure solution
Merci beaucoup Loraga pour l'idée de la capture d'écran, je n'y avais pas du tout pensé et c'est très utile pour celles et ceux qui ne sont pas sur IOS, je ne manquerai pas de m'en souvenir la prochaine fois Smiley cligne

Merci gcyrillus pour ton aide et ton approche de la question! J'ai essayé plusieurs de tes conseils mais sans succès, je me souviendrais néanmoins de cette démarche pour débusquer mes prochains bugs!

Et merci BYJMG pour cette solution qui fonctionne à merveille! Une simple ligne que je compte me faire tatouer pour ne plus jamais l'oublier!

Merci à vous pour votre temps, je vous souhaite une bonne journée!
Bonjour. Totalement hors sujet mais il y a une faute d'orthographe sur la page d'accueil de ton site. Restreint s'écrit comme ceci et non "restraint"

Désolé pour cette remarque qui n'a pas de lien avec ta question mais je ne peux pas m'empêcher..... ????
Smiley mur Bonjour. Totalement hors sujet mais il y a une faute d'orthographe sur la page d'accueil de ton site. Restreint s'écrit comme ceci et non "restraint"

Désolé pour cette remarque qui n'a pas de lien avec ta question mais je ne peux pas m'empêcher..... Smiley mur
netlink1989 a écrit :
Bonjour. Totalement hors sujet mais il y a une faute d'orthographe sur la page d'accueil de ton site. Restreint s'écrit comme ceci et non "restraint"

Désolé pour cette remarque qui n'a pas de lien avec ta question mais je ne peux pas m'empêcher..... Smiley mur
Sujet clos
Aller à