Un client nous a signalé un problème visuel bizarre : sur son téléphone, un iPhone, le texte de la page d’accueil de son nouveau site en thème bloc s’affichait à une taille disproportionnée par rapport au reste de la mise en page, rendant la lecture pénible. Sur son ordinateur, avec Chrome comme avec Safari sur Mac, tout paraissait parfaitement normal. Nos propres tests, sur Android et sur ordinateur, ne reproduisaient rien d’anormal non plus.
Ce genre de bug mono-navigateur, spécifique à Safari sous iOS, est l’un des plus frustrants à traiter : impossible de le voir sur son propre poste de développement sans matériel Apple mobile à disposition, et les outils de développement distants restent le seul recours fiable.
Symptôme : une taille de texte qui grossit toute seule
Le texte du site apparaissait correctement dimensionné au premier chargement de la page, mais grossissait significativement dès qu’on faisait pivoter l’iPhone de portrait à paysage puis retour en portrait, ou après un certain temps d’inactivité sur la page. Ce comportement erratique, non reproductible de manière systématique, orientait fortement vers un mécanisme propre au moteur de rendu de Safari plutôt que vers une erreur classique de CSS.
Reproduire le bug à distance
Sans Mac ni iPhone physique dans l’équipe à ce moment-là, nous avons utilisé les outils de débogage distant intégrés à Safari, accessibles depuis un Mac connecté à un iPhone via câble, en empruntant l’appareil d’un collègue pour la session de diagnostic. Cette inspection à distance a permis d’observer, dans l’onglet Éléments, qu’une propriété font-size calculée changeait effectivement de valeur après rotation de l’écran, sans qu’aucune règle CSS explicite du thème ne la cible directement.
Diagnostic : l’ajustement automatique de taille de texte de Safari
La cause identifiée est une fonctionnalité propre au moteur WebKit sous iOS : l’ajustement automatique de la taille du texte lors d’un changement d’orientation, destiné historiquement à conserver une lisibilité constante sur les anciens sites non responsives. Sur un thème bloc moderne, pleinement responsive, cet ajustement automatique devient contre-productif et produit exactement le symptôme observé : un texte qui grossit sans intervention de l’utilisateur ni du code du thème.
Le style global du thème ne définissait aucune règle pour neutraliser ce comportement, absent par défaut de la plupart des générateurs de theme.json et rarement mentionné dans la documentation des thèmes blocs eux-mêmes.
Le correctif : neutraliser explicitement l’ajustement
La correction consiste à ajouter une règle CSS ciblant spécifiquement ce comportement, à insérer dans les styles globaux du thème (via un fichier CSS additionnel chargé en complément de theme.json, puisque cette propriété n’a pas d’équivalent direct dans le schéma de theme.json) :
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}Cette règle indique explicitement au moteur de ne jamais ajuster automatiquement la taille du texte, quelle que soit l’orientation de l’écran, en fixant l’ajustement à 100 % de la taille définie par le CSS du thème lui-même.
Vérification après correctif
- Test de rotation répétée de l’écran sur l’iPhone emprunté, sans plus aucune variation de taille de texte constatée.
- Vérification que la règle n’affecte pas le comportement d’accessibilité de zoom manuel de l’utilisateur, resté pleinement fonctionnel.
- Test croisé sur un iPad emprunté également, où le même bug se manifestait de façon plus discrète, désormais corrigé par la même règle.
Un bug qui ne touche qu’un seul navigateur mobile n’est presque jamais un hasard : il révèle souvent un comportement natif du moteur de rendu qu’on ignorait tout simplement jusque-là.
En résumé
Ce bug, invisible sur ordinateur et sur Android, provenait d’un comportement natif de Safari sous iOS, l’ajustement automatique de la taille du texte lors d’un changement d’orientation, plutôt que d’une erreur dans le thème lui-même. La règle -webkit-text-size-adjust: 100% a suffi à neutraliser le problème, et nous l’avons depuis intégrée par défaut dans notre socle de styles globaux pour tout nouveau projet de thème bloc, en prévention plutôt qu’en réaction.
