[Résolu] Flex justify-content

Bonjour à tous
Je viens de découvrir un problème très bizarre que je ne comprends pas.
Si j'affiche la page https://tests.osirisnet.net/tombes/pharaons/amenhotep3/amenhotep3_01.htm
Elle comprend de nombreuses images, dont la plupart sont regroupées par blocs.
Pour simplifier le travail de l'auteur, la technique pour définir ces blocs est simple

<figure class="cluster">
    <script>diapo(image, présentation, texte)</script> <!-- pour chaque image -->
                  <!-- si présentation contient "break" cette image 
                          se trouve sur une nouvelle ligne -->
</figure>

Le script "diapo" génère une balise <figure> avec l'image et le texte en commentaire au dessous, des conventions sur le nom de l'image permettent également de définir quoi faire si on clique dessus.

A la fin du chargement de la page, un script analyse toutes les balises <figure class="cluster"> et fait un calcul complexe (que je ne suis pas parvenu à faire en pur CSS) pour définir la taille des images, etc.
Les images étant rangées par ligne, une fois le script passé on obtient quelque chose comme

<figure class="cluster">
    <figure class="row">
        <figure class="diapo"><img src="image"><figcaption>texte</figcaption>
                <!-- pour chaque image -->
    </figure> <!-- pour chaque ligne -->
</figure>

dans le CSS on a

.cluster .row {display:flex;width:100%;border-spacing:0.5em 0.25em;justify-content:center;}

Si j'ouvre cette page sur PC avec FireFox ou Chrome, ça s'affiche ainsi

c'est également valable si j'utilise la fonction d'affichage "Vue adaptative" pour simuler un iPad.

Mais si je l'ouvre sur iPad avec Safari ou Firefox, ça s'affiche ainsi:

c'est à dire que le contenu des <figure class="row"> est décalé fortement vers la droite.
C'est également le cas pour les 3 têtes de pharaon, ça se voit moins car la balise <figure class="cluster"> n'a pas de bordure.

Après pas mal de difficultés j'ai fini par trouver que la raison de cette présentation anormale se trouvait dans le CSS

.cluster .row {display:flex;width:100%;border-spacing:0.5em 0.25em;justify-content:center;}

Si je supprime "justify-content:center;" tout s'affiche normalement sur iPad (sauf bien entendu que ce n'est plus centré)
Ceci est bien entendu lié à ma très faible connaissance des subtilités de "flex".

Questions:
1) quelle est la raison de cette différence de comportement ?
2) voyez vous un moyen de corriger le problème en gardant le centrage des lignes ?

Merci de partager votre expertise.
Modifié par PapyJP (13 Nov 2021 - 11:58)

Merci de ta réponse je regarde ça tout de suite.
La définition

Figure.diapo {
  display: inline-table;
  padding:2px;
  width:1%;
}

date du début du projet. Aucun souvenir du pourquoi et du comment.
L’idée était sans doute de définir une <figure> qui s’ajuste au mieux à la taille de l’image et qui puisse être mise un peu n’importe où dans les pages. Il doit y avoir mieux pour faire ça.

Effectivement, quand on enlève le width:1%; de la définition ça marche sans problème.
Je ne pense pas que ça ait des effets de bord négatifs ailleurs, cette ligne est là depuis le 28 mai 2017 au plus tard d'après mes archives. Inutile de dire que je n'en ai aucun souvenir.

Je ne suis pas très fana de mettre width: clamp(1%,50vw,100%); je crains des effets de bord...

Noter que le problème n'est pas une spécificité Safari, on le trouve aussi avec FireFox pour iOS, ou alors FireFox pirate le moteur CSS de Safari, ce qui me semble bizare (quoi que...)

Il y a bien des bordures sur la plupart des diapos, il faut préciser dans la classe "noborder" pour ne pas en avoir).

Je vais mettre cette modification dans le site de tests, et pas seulement l'environnement spécifique de test que j'ai fait pour traiter ce problème, on verra bien ce que ça donne.

Merci encore de ton aide (efficace somme toujours)
Modifié par PapyJP (13 Nov 2021 - 18:12)

Nouveau problème:
Une fois le width:1%; supprimé, ou modifié on a

Le texte déforme l'image alors qu'avant le texte s'ajustait à la largeur de l'image.
L'adresse de la page: https://tests.osirisnet.net/tombes/pharaons/amenhotep3/amenhotep3_01.htm
Modifié par PapyJP (15 Nov 2021 - 12:57)

PapyJP a écrit :
Noter que le problème n'est pas une spécificité Safari, on le trouve aussi avec FireFox pour iOS, ou alors FireFox pirate le moteur CSS de Safari, ce qui me semble bizare (quoi que...)

Tous les navigateurs sur iOS sont obligés par Apple d'utiliser le moteur de rendu de Safari (probablement pour ne pas lui faire de concurrence niveau vitesse)...

PapyJP a écrit :
Nouveau problème:
Une fois le width:1%; supprimé, ou modifié on a upload/1636976586-48769-amenhotep3-1.png

Le texte déforme l'image alors qu'avant le texte s'ajustait à la largeur de l'image.
L'adresse de la page: https://tests.osirisnet.net/tombes/pharaons/amenhotep3/amenhotep3_01.htm

Ton figcaption ne doit pas être placé au bon endroit parce qu'il est maintenant en dessous d'une seule image ou lieu des trois...

<figure class="cluster">
    <figure class="row">
        <figure class="diapo"><img src="image"><figcaption>texte</figcaption>
                <!-- pour chaque image -->
    </figure> <!-- pour chaque ligne -->
<figcaption>texte</figcaption> <!-- ton figcaption devrait être ici àmha -->
</figure>

Modifié par kerlutinoec (15 Nov 2021 - 13:49)

Bien entendu qu'il n'est pas au bon endroit, c'est simplement un test qui démontre que ça ne va pas: l'image se déforme, ce qu'elle ne fait pas si je laisse width:1%

PapyJP a écrit :
Bien entendu qu'il n'est pas au bon endroit, c'est simplement un test qui démontre que ça ne va pas: l'image se déforme, ce qu'elle ne fait pas si je laisse width:1%

Deux possibilité si tu veux laisser ton texte là :

height:auto

sur les images
ou

overflow:hidden

sur le texte

Bonjour, si tu veut que la largeur s'adapte à l'image, essaies en remplaçant width:1% par width:min-content.

Je suis sur mobile pour le moment, c'est une suggestion.

Par curiosité tu peux chercher ce à quoi correspond min-content et si compris chez Apple .
Cdt.
Modifié par gcyrillus (15 Nov 2021 - 14:37)

La hauteur de l'image est déterminée par script, de façon à ce que toutes les images côte à côte aient la même hauteur.
overflow:hidden n'a pas d'effet.

En attendant mieux je vais revenir à width:1%; ou widht:0;

La conséquence de cette modification ne se voit que sur iPad -- à mon sens c'est une "anomalie" de iOS -- et je ne m'en suis rendu compte que par hasard. Aucun utilisateur ne s'est plaint.

Moyennant quoi j'aimerais comprendre le pourquoi du comment.

gcyrillus a écrit :
Bonjour, si tu veut que la largeur s'adapte à l'image, essaies en remplaçant width:1% par width:min-content.

Je suis sur mobile pour le moment, c'est une suggestion.

Par curiosité tu peux chercher ce à quoi correspond min-content et si compris chez Apple .
Cdt.

Nos messages se sont télescopés.
min-content est évidemment la solution à laquelle j'aurais dû penser et .... CA MARCHE SOUS IOS!
Merci mille fois