---
name: feedback-safari-mobile-viewport
description: "Safari mobile — utiliser 100dvh et visualViewport pour éviter les décalages liés à la barre d'adresse"
metadata: 
  node_type: memory
  type: feedback
  originSessionId: 21fbd9de-5545-4f5d-8809-a41863f7cdb6
---

Sur Safari iOS (iPhone/iPad), `100vh` inclut la barre d'adresse du navigateur, ce qui pousse les éléments en bas de page (sidebar, UserMenu) hors de la zone visible.

**Why:** Safari mobile calcule `100vh` par rapport à la hauteur totale incluant le chrome du navigateur, pas la zone réellement visible. `window.innerHeight` a le même problème pour les calculs JS.

**How to apply — CSS :**
Toujours doubler les déclarations de hauteur plein-écran :
```css
height: 100vh;
height: 100dvh; /* remplace 100vh sur Safari 15.4+ */
min-height: 100vh;
min-height: 100dvh;
```
`100dvh` (dynamic viewport height) s'ajuste dynamiquement quand la barre d'adresse apparaît/disparaît.

**How to apply — JS (calculs de position type `position: fixed`) :**
Remplacer `window.innerHeight` par `window.visualViewport.height` :
```js
const vh = window.visualViewport ? window.visualViewport.height : window.innerHeight;
```
Et écouter les événements du visualViewport si le menu doit rester calé pendant le scroll :
```js
window.visualViewport.addEventListener('resize', computePosition);
window.visualViewport.addEventListener('scroll', computePosition);
```

Appliqué sur : `.sidebar` (height), `.app-shell` (min-height), `UserMenu.computePosition`.
