La barre d'adresse/barre d'URL reste inchangée lors du défilement sur Safari mobile

Question

Je crée un site Web à l'aide de React (16.8.6), mais sur Safari mobile, lorsque l'utilisateur commence à faire défiler, il ne réduit pas la barre d'URL comme le font d'autres sites Web.

Le CSS du div d'encapsulation ressemble à ceci :

<ContentContainer>
    <ScrollContainer>
        {...autres composantsici}
    <ScrollContainer/>
<ContentContainer/>

const ContentContainer = styled.div`
  height: 100% /*Autoriser deux colonnes à occuper toute la hauteur de la fenêtre du navigateur*/
  débordement-y : auto ;
  croissance flexible : 1 ;
  affichage : flexible ;
  direction flexible : colonne ;
`;
const ScrollContainer = styled.div`
  flexion : 1 ;
`;


App.css ressemble à ceci :


html {
  hauteur : 100 % ;
  hauteur min : 100vh ;
}

corps {
  famille de polices : « Work Sans », « Courier New », sans-serif ;
  hauteur min : 100 % ;
  hauteur : 100 % ;
  marge : 0px ;
}
#application {
  hauteur : 100 % ;
}

#racine {
  hauteur : 100 % ;
  affichage : flexible ;
  overflow: Hidden; /*Rendre le corps non défilable*/
  dimensionnement de la boîte : bordure-boîte ;
}


J'essaie de comprendre un problème dans ce CSS qui empêche la barre d'URL Safari de s'effondrer lorsque l'utilisateur fait défiler. Merci pour votre aide. 
            

Answer 1

Pour réduire/réduire la barre d'URL dans Safari mobile, vous devez avoir votre body溢出视口，但这里并非如此：您的body不可滚动，而且您的ContentContainer entièrement dans la fenêtre d'affichage.

Pour tester cela, créez une nouvelle page sans CSS et mettez suffisamment de contenu dedans body pour rendre la page défilante.