28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je rencontre un bug étrange uniquement sur iPhone 11 et que je n'arrive pas à reproduire sur desktop ni sur un tel Android (ni moins depuis l'outil de test responsive de Chrome).

Voici une photo du décalage que provoque chaque virgule présente dans une ligne de titre :
upload/1589545990-10430-test.jpg

Je n'ai jamais vu ça ! une idée ?
Modérateur
Bonjour,
As-tu un lien pour tester ? Il y a quelques possibilités pour avoir ce comportement mais ce serait plus facile à déchiffrer avec du code Smiley smile
Modérateur
Je viens de testé avec un iPhone Xs (Safari) et cela ne pose pas de problème… Assez étrange comme problème sachant que le texte est en un seul morceau. Peut-être cela vient de la police de caractères qui semble être pourtant une Google Font ?
On va voir si quelqu'un d'autres peut reproduire…
Etrange oui, la personne qui s'en est rendu compte le constate à la fois sur iPhone 11 et également PC avec Chrome Smiley eek

Moi sur Mac / Chrome et Mac / Safari aucun problème quelle que soit la résolution ...
Modérateur
J'ai fait les mêmes tests que toi on dirait… Est-ce que la personne a changé des paramètres par défaut peut-être (grand texte ou autre accessibilité) ? (je ne dis pas que c'est normal que ça casse l'affichage, il faut juste creuser pour peut-être trouver une cause et pouvoir fixer ça).

J'ai regardé le code, cela parait pourtant clean, rien ne m'a sauté aux yeux.
On va voir si d'autres ont une idée?
Modérateur
Si tu peux accéder au téléphone de la personne, tu peux connecter sur ton mac et en activant le mode avancé (paramètre Safari sur l'iPhone), tu peux alors avoir une inspecteur d'élément depuis ton mac relié au téléphone (par cable) qui te donnera peut-être plus d'info.
Administrateur
Bonjour,

il y a eu un souci avec flexbox et Chrome 80 mais aucun rapport ici j'ai l'impression.

Oh est-ce que ça le fait encore aujourd'hui ? Il me semble que GG Fonts était down pendant plusieurs heures en milieu ou fin de semaine Smiley hum

---
Est-ce que cette personne peut tester sur PC avec Edge ou Firefox ?

2 devices complètement différents et le même souci >
- Elle est bien sous Windows, pas Linux ?
- Pas de Pi-Hole dans son réseau ?
- pour l'iPhone est-ce bien mobile avec connexion data, pas Wi-Fi donc 2 FAI différents pour le PC et le mobile ?
- Est-ce que - sur la capture d'écran - visuellement tu vois que la fonte Google (Heebo de mémoire) est bien chargée ?

iPhone :
- est-ce le même problème en mode paysage (et portrait) ? Il y a maintenant une telle différence entre 375px de large et 800 et quelques que cela correspond à des Media Queries bien différentes dans Bootstrap Smiley ravi

PC :
- y a-t-il un niveau de zoom (faire un Ctrl-0 pour réinitialiser) ? Tu peux mesurer la capture d'écran et comparer aussi.