Skip to content

Safe area Android — Documentation

Vue d'ensemble

Sur Android, la gestion des zones sûres (status bar, barre de navigation) passe par :

  1. MainActivity injecte les insets bruts via JS (--becik-statusbar-top-raw, --becik-safe-bottom-raw)
  2. globals.css plafonne et dérive --becik-statusbar-top et --becik-safe-bottom
  3. Composants utilisent ces vars (ou env(safe-area-inset-*)) pour le padding

Problème connu : env() = 0 sur Android

Sur Android WebView, env(safe-area-inset-top) et env(safe-area-inset-bottom) retournent souvent 0px. D'où l'injection native depuis MainActivity.

S'abonner à l'issue GitHub pour suivre les évolutions.

Problème : insets bruts gonflés

Certains appareils (ex. Samsung) renvoient des valeurs élevées (113px, 192px) qui semblent incorrectes. D'où les plafonds dans globals.css pour éviter un padding excessif.

Problème : 48px de padding en trop

Symptôme : bandes vides de 48px en haut et en bas.

Cause : les plafonds --becik-statusbar-max et --becik-navbar-max à 48px produisent un padding dérivé de 48px, alors que sur certains appareils (env=0, raw gonflés) le contenu est déjà correctement positionné par le système.

Correctif appliqué : plafonds à 0px dans globals.css. Les vars dérivées deviennent 0, plus de padding superflu.

/* globals.css :root */
--becik-statusbar-max: 0px;
--becik-navbar-max: 0px;

Bug historique : erreur de syntaxe MainActivity

Le JS injecté avait une virgule mal placée produisant : 

...setProperty('...','113px');.setProperty('...','192px');
Le ; terminait la première instruction, le . suivant provoquait SyntaxError: Unexpected token '.'. Corrigé en deux instructions séparées.

Réglage des plafonds

Dans src/app/globals.css : - --becik-statusbar-max : plafond pour le haut - --becik-navbar-max : plafond pour le bas

Redéployer la webapp suffit (pas de rebuild Android).

Page debug

/dashboard/super-admin/debug-safe-area/ (accès super-admin) affiche : - Valeurs brutes (MainActivity) - Plafonds (globals.css) - Dérivées (min(raw, max)) - env(safe-area-inset-top), env(safe-area-inset-bottom) — pour vérifier si le navigateur les fournit

Checklist si le padding revient

  1. Consulter la page debug
  2. Vérifier env() : 0px ou valeurs réelles ?
  3. Vérifier les raw : gonflés (100px+) ou raisonnables ?
  4. Ajuster --becik-statusbar-max et --becik-navbar-max dans globals.css