dev-tour

Diagnostic

iOS Safari zoom automatique quand le focus passe sur un <input> / <textarea> / <select> dont la font-size calculée est < 16px. Comportement par défaut Safari mobile pour rendre le champ lisible — mais ici la page n'a pas user-scalable=no ni maximum-scale=1, donc le zoom reste après défocus.

Champs concernés dans dev-tour :

app/bugs/nouveau/page.tsx:241 (input title, text-sm = 14px)
app/bugs/nouveau/page.tsx:256 (textarea description, text-sm) — celui visible capture 2
components/bugs/bug-editor.tsx:367 (textarea édition existante, text-sm)
components/search/global-search.tsx:144 (input Cmd+K, text-sm)
components/sherlock/sherlock-search.tsx:133 (textarea sherlock, text-sm)

Fix

Règle CSS globale dans app/globals.css (@layer base, media max-width: 640px) qui force font-size: 16px sur tous input (sauf checkbox/radio), textarea, select. Couvre les 5 champs en un changement, sans impact desktop (Tailwind text-sm continue de s'appliquer au-dessus de 640px).

Approche préférée à un patch inline par champ : DRY + couvre automatiquement les futurs inputs.

Vérifications

Pas de modification inline du JSX (un seul fichier modifié : app/globals.css)
TSC : pas concerné (CSS only)
À tester côté user : ouvre /bugs/nouveau sur iPhone Safari, focus le textarea → plus de zoom auto

Régression 2026-05-24 (re-test user)

Fix initial inefficace : zoom toujours déclenché à l'ouverture du clavier iOS, reste effectif après fermeture (obligé de pincer pour dézoomer).

Cause : règle placée dans @layer base de Tailwind v4. Or l'ordre de cascade des layers est theme → base → components → utilities : les classes utility (text-sm, text-xs) qui appliquent font-size: 0.875rem sont dans @layer utilities et battent silencieusement ma règle dans @layer base. Le font-size: 16px n'a donc jamais été appliqué.

Fix correctif : règle sortie de @layer base (en fin de fichier globals.css, hors layer = priorité maximale) avec !important pour battre toute classe utility inline. Media query mobile only (max-width: 640px) pour ne pas impacter desktop.

@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

Re-test

Hard refresh impératif sur iPhone Safari (tirer l'onglet vers le bas jusqu'à voir le refresh icon, ou ouvrir onglet privée)
/bugs/nouveau → focus la textarea description → l'écran ne doit plus zoomer
Si OK → passer en RESOLVED

Régression 2026-05-24 #2 (re-test user toujours KO)

Fix correctif (règle hors @layer base + !important) toujours sans effet à l'écran.

Cause racine identifiée : Tailwind v4 + Lightning CSS suppriment toute règle CSS placée hors d'un @layer du bundle final. Vérifié en grep dans le chunk servi : la règle hors layer disparaît, le bundle saute directement de la fermeture de @layer base à @layer components / @layer utilities. Avant ce diag il y avait aussi du cache dev server qui masquait le problème (1 ancien next-server orphelin dans /app via Docker container superapp_nextjs).

Fix final : règle remise DANS @layer base avec !important. !important suffit à battre les classes utility text-sm/text-xs qui n'ont pas !important, donc pas besoin de chercher un layer plus prioritaire.

@layer base {
  ...
  @media (max-width: 640px) {
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
      font-size: 16px !important;
    }
  }
}

Vérifié en curl http://localhost:3001/_next/static/chunks/...css | grep "font-size: 16px" → 1 match dans le bundle servi.

Re-test #2

Hard refresh sur iPhone (vide cache navigateur — sur iOS Safari: Réglages > Safari > Effacer historique, ou ouvrir onglet privée)
/bugs/nouveau → focus la textarea → plus de zoom auto
Si OK → RESOLVED

Confirmation user 2026-05-24

Test iPhone OK : plus de zoom à l'ouverture du clavier. RESOLVED.

Leçon

Tailwind v4 + Lightning CSS imposent que toute règle CSS soit dans un @layer pour être incluse dans le bundle final. Une règle hors layer dans globals.css est silencieusement supprimée par le compilateur — sans warning, sans erreur. À retenir pour les futurs fix CSS dans ce projet.

Zoom désagréable