Sur Safari Mobile 10.3, le pied de page collant peut défiler hors de l'écran

Question

Sur Safari Mobile 10.3, le pied de page collant peut défiler hors de l'écran

Demandé el 17 de Mai, 2017: Quand la question a-t-elle été
5164 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Notre application web mobile a collant, bas de navigation comme celui que vous trouverez souvent dans les applications iOS, et après le Safari 10.3 de presse sur le paysage qu' il est possible de faire défiler collant de navigation (pied de page) hors de l'écran. Même si il est position: fixed et définissez bottom: 0 , ce n'était pas possible sur les anciennes versions de Safari.

Styles pour collante nav / pied de page sont les suivantes:

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

DÉMO pour essayer sur le téléphone

En mode portrait, il est toujours visible:

En mode paysage, vous pouvez faire défiler l'écran pour la taille du haut de la barre d'adresse:

Quelqu'un a rencontré ce problème? Je vous serais reconnaissant de toute aide à faire le pied de rester sur l'écran. Merci

Demandé el 17 de Mai, 2017 par Andriy Horen

Answer 1

5 Réponses

Answer 2

11voto

Thomas van Broekhoven Points 524

Il n'y a rien que vous pouvez faire à ce sujet. Safari paysage de la mode rend le conteneur avec votre contenu aller hors 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 = Safari de la barre de navigation

La barre jaune = Votre application barre de navigation

Au lieu de réduire le conteneur de hauteur, Safari permet d'aller hors de l'écran.

Répondu el 20 de Mai, 2017 par Thomas van Broekhoven (524 Points )

Answer 3

6voto

Paolo Forgia Points 4437

Ce n'est plus une solution de contournement que d'une réelle solution. Toutefois position: fixed a été un problème pour les appareils mobiles pendant des années et la meilleure façon de surmonter ce problème est d'utiliser position: sticky.

sticky se comporte comme position: relative sein de sa mère, jusqu'à ce qu'un compte tenu de décalage de seuil est atteint dans la fenêtre d'affichage.

_{De: Coller votre débarquements! position: collant terres dans WebKit}

Toutefois position: sticky n'est pas entièrement pris en charge encore, je vous suggère d'utiliser également:

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

_{Voir ici pour MS Edge sticky statut de support (merci Frits)}

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>

Répondu el 23 de Mai, 2017 par Paolo Forgia (4437 Points )

Answer 4

4voto

Marco Hengstenberg Points 654

Il y a une autre façon de créer un élément fixe au bas de la page:

Définir l' <body> élément (ou tout ce qui enveloppe votre en-tête, contenu et pied de page) à l' display: flex; height: 100vh. Ensuite, vous prenez le pied de page et réglez - 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 serait l'utilisation de Grille CSS:

html {
    height: 100%;
}

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

Afin d'obtenir le meilleur des deux mondes vous pouvez placer la Grille CSS styles dans une @supports(display: grid){} wrapper. Si la Grille est pris en charge le navigateur et autres secours à Flexbox.

La meilleure chose à l'aide de cette technique est que vous ne rencontrerez pas de chevauchement de contenu, en zoomant questions et il est entièrement adapté à partir de l'obtenir-aller.

Il y a un article sur le CSS Astuces sur le sujet: https://css-tricks.com/couple-takes-sticky-footer/

Répondu el 24 de Mai, 2017 par Marco Hengstenberg (654 Points )

Answer 5

0voto

Sami Points 351

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

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

Répondu el 26 de Mai, 2017 par Sami (351 Points )

Answer 6

-1voto

harry Points 128

J'ai eu le même problème et je l'ai résolu de manière à ce que mon testeur soit satisfait. Pas une solution parfaite mais faire 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>');
    }
}

Répondu el 28 de Juin, 2018 par harry (128 Points )

Sur Safari Mobile 10.3, le pied de page collant peut défiler hors de l'écran

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Sur Safari Mobile 10.3, le pied de page collant peut défiler hors de l'écran

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: