web-dev-qa-db-ja.com

Safari Mobile 10.3では、スティッキーフッターを画面外にスクロールできます

私たちのモバイルWebアプリケーションには、iOSアプリケーションでよく見られるような下向きのナビゲーションがあり、Safari 10.3リリース後は横向きのみでスクロールできます画面外のナビゲーション（フッター）。 position: fixedと設定bottom: 0また、古いSafariバージョンでは不可能でした。

スティッキーナビゲーション/フッターのスタイルは次のとおりです。

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

電話で試すデモ

ポートレートモードでは、常に表示されます。

portrait-mode

横向きモードでは、一番上のアドレスバーのサイズに合わせて画面外にスクロールできます。

enter image description here

誰かがそのような問題に遭遇しましたか？フッターを画面に表示したままにしておくと便利です。ありがとう

htmlioscssmobilemobile-safari
28
Andriy Horen

あなたがそれについてできることは何もありません。 Safariの横長モードでは、コンテンツを含むコンテナが画面から消えます。これは検出できないため、解決することはできません。私は何が起こるかを説明しようとしました：

青いバー= Safariのナビゲーションバー

黄色のバー=アプリのナビゲーションバー

Situation safari

コンテナの高さを縮小する代わりに、Safariはコンテナを画面から外します。

9
Thomas van Broekhoven

これは、実際のソリューションよりも回避策です。ただし、position: fixedは長年モバイルデバイスの問題であり、この問題を解決する最善の方法は position: sticky を使用することです。

stickyは、指定されたオフセットしきい値がビューポートで満たされるまで、その親内でposition: relativeのように動作します。

From： 着陸を貼り付けます！位置：WebKitのスティッキーランド

ただし、position: stickyはまだ完全にはサポートされていないため、以下も使用することをお勧めします。

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

MS Edgeのステータス here を参照stickyサポートステータス（ありがとう 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

ページの下部に固定要素を作成する別の方法があります。

_<body>_要素（またはヘッダー、コンテンツ、フッターをラップするもの）を_display: flex; height: 100vh_に設定します。次に、フッターを取得して_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;
}
_

同じマークアップを持つ別のソリューションは、CSSグリッドを使用することです。

_html {
    height: 100%;
}

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

両方の世界を最大限に活用するために、CSS Gridスタイルを@supports(display: grid){}ラッパーでラップできます。グリッドがサポートされている場合、ブラウザはそれを取得し、そうでない場合はFlexboxにフォールバックします。

この手法を使用する最も良い方法は、重複するコンテンツやズームの問題に遭遇することはなく、開始から完全に応答することです。

このテーマに関するCSSトリックに関する記事があります。 https://css-tricks.com/couple-takes-sticky-footer/

4
Marco Hengstenberg

ランドスケープモードへの切り替えで発生すること、およびサファリの「最小UI」との切り替えは、ウィンドウサイズ変更イベントです。固定要素のgetBoundingClientRect().bottomをチェックして、_window.innerHeight_より大きいかどうかを確認できます（これは、固定要素がウィンドウの下部にないことを意味します）。その場合は、bottom要素のcssプロパティfixedをelement.getBoundingClientRect().bottom - window.innerHeightに設定できます。これにより、固定要素の位置が維持されます。これはユーザーには少しぎこちないように見えますが、これは画面の下部にある要素よりも優れています。

0
elLargeGrande

あなたのCSSの固定位置要素でこれを試してください：

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

私も同じ問題を抱えていたので、テスターが満足するように修正しました。完璧なソリューションではありませんが、その仕事をしています。

パディングまたはマージンのある空の要素を追加します。

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