wake-up-neo.net

In Safari Mobile 10.3 kann die klebrige Fußzeile vom Bildschirm gescrollt werden

Unsere mobile Webanwendung verfügt über eine Sticky-Bottom-Navigation, wie Sie sie häufig in iOS-Apps finden. Nach der Veröffentlichung von Safari 10.3 on only ist es nur möglich, die Sticky-Navigation (Fußzeile) vom Bildschirm zu scrollen. Obwohl es position: fixed ist und bottom: 0 eingestellt ist, war es bei älteren Safari-Versionen auch nicht möglich.

Styles für sticky nav/footer sind folgende:

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

DEMO am Telefon ausprobieren

Im Hochformat ist es immer sichtbar: 

 portrait-mode

Im Querformat können Sie die Größe der oberen Adressleiste außerhalb des Bildschirms anzeigen lassen:

 enter image description here

Hat jemand ein solches Problem gefunden? Ich würde mich freuen, wenn Sie mir helfen würden, die Fußzeile auf dem Bildschirm zu halten. Vielen Dank

htmlioscssmobilemobile-safari
25
Andriy Horen

Dies ist mehr eine Problemumgehung als eine echte Lösung. position: fixed ist jedoch seit Jahren ein Problem für mobile Geräte und der beste Weg, dieses Problem zu lösen, ist die Verwendung von position: sticky .

sticky verhält sich innerhalb eines übergeordneten Elements wie position: relative, bis ein Die angegebene Offset-Schwelle wird im Ansichtsfenster erreicht.

Von: Stecke deine Landungen! Position: klebrige Länder in WebKit

Allerdings wirdposition: sticky noch nicht vollständig unterstützt, daher würde ich vorschlagen, auch Folgendes zu verwenden:

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

Siehe Status hier für MS Edge sticky Support-Status (Danke 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

Sie können nichts dagegen tun. Im Landscape-Modus von Safari wird der Container mit dem Inhalt vom Bildschirm genommen. Dies ist nicht nachweisbar und daher nicht zu lösen. Ich habe versucht zu veranschaulichen, was passiert:

Die blaue Leiste = Navigationsleiste von Safari 

Die gelbe Leiste = Navigationsleiste Ihrer App

 Situation safari

Anstatt die Höhe des Containers zu verkleinern, lässt Safari ihn vom Bildschirm verschwinden.

6
Thomas van Broekhoven

Es gibt eine andere Möglichkeit, ein festes Element am unteren Rand der Seite zu erstellen:

Setzen Sie das <body>-Element (oder was auch immer Ihre Kopfzeile, den Inhalt und die Fußzeile umschließt) auf display: flex; height: 100vh. Dann nimmst du die Fußzeile und stellst sie auf 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;
}

Eine andere Lösung mit demselben Markup wäre die Verwendung von CSS-Grid:

html {
    height: 100%;
}

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

Um das Beste aus beiden Welten zu erhalten, können Sie die CSS-Grid-Stile in einen @supports(display: grid){}-Wrapper packen. Wenn Grid unterstützt wird, übernimmt der Browser dies und wird ansonsten auf Flexbox zurückgreifen.

Das Beste, was Sie mit dieser Technik tun können, ist, dass Sie nicht auf überlappende Inhalte und Zoom-Probleme stoßen und sie von Anfang an voll reagieren.

Es gibt einen Artikel über CSS-Tricks zum Thema: https://css-tricks.com/couple-takes-sticky-footer/

4
Marco Hengstenberg

Beim Umschalten in den Querformat-Modus geschieht etwas, und der Wechsel zu und von der minimalen Benutzeroberfläche der Safari ist ein Fenster-Größenänderungsereignis. Sie können die getBoundingClientRect().bottom des festen Elements überprüfen, um zu sehen, ob es größer als window.innerHeight ist (dies bedeutet, dass das feste Element am unteren Rand des Fensters liegt). Wenn ja, können Sie die css-Eigenschaft bottom des fixed-Elements auf element.getBoundingClientRect().bottom - window.innerHeight setzen. Dadurch bleibt die Position des festen Elements erhalten. Es scheint für den Benutzer ein kleiner Ruck zu sein, aber dies ist besser als das Element, das vom unteren Rand des Bildschirms ausgeht.

0
elLargeGrande

Versuchen Sie dies mit dem festen Positionselement in Ihrer CSS:

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

Ich hatte das gleiche Problem und habe das Problem so behoben, dass mein Tester glücklich ist ... Nicht eine perfekte Lösung, aber seine Arbeit zu machen.

Fügen Sie ein leeres Element mit einer Auffüllung oder einem Rand hinzu.

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