web-dev-qa-db-fra.com

Sur Safari Mobile 10.3, vous pouvez faire défiler l'écran en faisant défiler

Notre application Web mobile offre une navigation de fond collante comme celle que vous retrouvez souvent dans les applications iOS. Après Safari 10.3 version sur paysage uniquement, il est possible de faire défiler la navigation collante (pied de page) à l'écran. Même s'il s'agit de position: fixed et que vous avez défini bottom: 0, cela n'était pas possible sur les anciennes versions de Safari.

Les styles de collant nav/footer sont les suivants:

footer {
  position: fixed;
  height: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 0, 0, 0.7);
}

DEMO à essayer sur téléphone

En mode portrait, il est toujours visible: 

 portrait-mode

En mode paysage, vous pouvez le faire défiler à l'écran pour définir la taille de la barre d'adresse supérieure:

 enter image description here

Quelqu'un at-il rencontré un tel problème? J'apprécierais toute aide pour que le pied de page reste à l'écran. Merci

htmlioscssmobilemobile-safari
25
Andriy Horen

C'est plus une solution de contournement qu'une solution réelle. Cependant, position: fixed est un problème pour les appareils mobiles depuis des années et le meilleur moyen de le résoudre consiste à utiliser position: sticky .

sticky se comporte comme position: relative au sein de son parent, jusqu'à ce qu'un le seuil de décalage donné est atteint dans la fenêtre.

De: Collez vos atterrissages! position: les terrains collants dans WebKit

Cependantposition: sticky n'est pas encore totalement supporté, je suggérerais donc d'utiliser aussi:

position: sticky; /* currently in development for MS Edge */
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;

Voir status ici pour MS Edge sticky statut de support (merci Frits )

 enter image description here 

html,
body {
  height: 200%;
}

body {
  background-image: linear-gradient(180deg, #ededed 0px, #ededed 9px, #000000 9px, #000000 10px);
  background-size: 100% 10px;
}

footer {
  position: sticky; /* currently in development for MS Edge */
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  height: 50px;
  top: 80%;
  background: rgba(255, 0, 0, 0.7);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <footer>
  </footer>
</body>

</html>

6
Paolo Forgia

Vous ne pouvez rien y faire. Le mode paysage de Safari rend le conteneur avec votre contenu sortant de l'écran. Ce n'est pas détectable et donc pas à résoudre. J'ai essayé d'illustrer ce qui se passe:

La barre bleue = barre de navigation de Safari 

La barre jaune = la barre de navigation de votre application

 Situation safari

Au lieu de réduire la hauteur du conteneur, Safari le laisse disparaître de l’écran.

6
Thomas van Broekhoven

Il existe un autre moyen de créer un élément fixe en bas de la page:

Définissez l'élément <body> (ou tout ce qui entoure votre en-tête, votre contenu et votre pied de page) sur display: flex; height: 100vh. Ensuite, prenez le pied de page et réglez-le sur margin-top: auto.

HTML:

<body>
    <header>
    </header>
    <main>
    <main>
    <footer>
    </footer>
</body>

CSS:

html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

Une solution différente avec le même balisage consisterait à utiliser CSS Grid:

html {
    height: 100%;
}

body {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

Pour obtenir le meilleur des deux mondes, vous pouvez envelopper les styles de grille CSS dans un wrapper @supports(display: grid){}. Si Grid est pris en charge, le navigateur le prend et sinon, il se replie sur Flexbox.

La meilleure chose à utiliser avec cette technique est que vous ne rencontrerez pas de contenu qui se chevaucherait, des problèmes de zoom et qui serait totalement réactif dès le départ.

Il existe un article sur CSS Trucs sur le sujet: https://css-tricks.com/couple-takes-sticky-footer/

4
Marco Hengstenberg

Quelque chose se produit lors du passage en mode paysage et lors du passage à l'interface utilisateur minimale de safari est un événement de redimensionnement de la fenêtre. Vous pouvez vérifier le getBoundingClientRect().bottom de l'élément fixe pour voir s'il est supérieur à window.innerHeight (Cela signifie que l'élément fixe est au bas de la fenêtre). Si tel est le cas, vous pouvez définir la propriété css bottom de l'élément fixed sur element.getBoundingClientRect().bottom - window.innerHeight. Cela maintiendra la position de l'élément fixe. Cela semble être un peu risqué pour l’utilisateur, mais c’est mieux que l’élément qui sort du bas de l’écran.

0
elLargeGrande

Essayez ceci sur l'élément de position fixe dans votre css:

transform:translate3d(0px, 0, 0);
-webkit-transform:translate3d(0px, 0, 0);
0
Sami

J'ai eu le même problème et je l'ai résolu de manière à ce que mon testeur soit heureux… .. Une solution pas parfaite mais qui fait son travail.

Ajoutez un élément vide avec un remplissage ou une marge.

const _userAgent = navigator.userAgent.toLowerCase();
if (_userAgent.indexOf('safari') != -1) {
    if (_userAgent.indexOf('chrome') == -1) {
        $('.myelem').append('<div class="my-5"></div>');
    }
}
0
harry