在 Safari Mobile 10.3 上，可将粘滞页脚滚动到屏幕外答案

【问题标题】：On Safari Mobile 10.3 sticky footer can be scrolled off the screen在 Safari Mobile 10.3 上，可将粘滞页脚滚动到屏幕外
【发布时间】：2017-10-17 04:06:45
【问题描述】：

我们的移动网络应用程序具有粘性底部导航，就像您在 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);
}

DEMO to try on phone

在纵向模式下，它始终可见：

在横向模式下，您可以根据顶部地址栏的大小将其滚动到屏幕外：

有人遇到过这样的问题吗？我将不胜感激使页脚留在屏幕上的任何帮助。谢谢

【问题讨论】：

我相信这是 iOS 的事情。而不是浏览器问题。您是否尝试过添加包装 div 并定义“最大高度”？

标签： html ios css mobile mobile-safari

【解决方案1】：

对此你无能为力。 Safari 的横向模式使包含您的内容的容器离开屏幕。这是无法检测到的，因此无法解决。我试图说明会发生什么：

蓝色条 = Safari 的导航栏

黄色栏 = 您应用的导航栏

Safari 不会缩小容器的高度，而是让它离开屏幕。

【讨论】：

这很清楚，但它无助于解决问题。我希望也许有人知道为什么这实际上是在 Safari 10.3 中引入的，以及如何处理它。解决此问题的一种可能方法是使主体内部的容器可滚动并且主体 - 100% 高度静态。但这需要完全重新实现我们的布局，这是我们不想做的事情。
这是我见过的对这个问题最好的描述。

【解决方案2】：

这与其说是真正的解决方案，不如说是一种解决方法。然而position: fixed 多年来一直是移动设备的问题，解决这个问题的最佳方法是使用position: sticky。

sticky 在其父级中的行为类似于 position: relative，直到在视口中满足给定的偏移阈值。

_{发件人：Stick your landings! position: sticky lands in WebKit}

但是 position: sticky 还没有完全支持，所以我建议也使用：

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

_{查看状态 here 了解 MS Edge sticky 支持状态（谢谢 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>

【讨论】：

看这里stackoverflow.com/questions/38987153/…
不幸的是，该解决方案与 OP 的问题存在相同的问题
另外，position: -ms-sticky; 很遗憾不会做任何事情，因为在 Edge 中绝对 no 支持粘性定位，无论有无前缀。当您考虑到它是一个如此广泛使用的浏览器这一事实时，真的有点难过......
我真的希望如此@PaoloForgia！我已经查了几次，但 MS 似乎对将来是否以及何时会支持它守口如瓶。不幸的是，微软在跟上浏览器支持方面没有最好的记录，所以我没有抱太大希望。
哦，我可能只需要吃不起眼的馅饼，我刚刚找到 this thread，上面写着 Edge 上 position:sticky; 的开发始于 2017 年 3 月。让我们竖起大拇指快速解决:)

【解决方案3】：

还有另一种在页面底部创建固定元素的方法：

将<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 Grid：

html {
    height: 100%;
}

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

为了两全其美，您可以将 CSS Grid 样式包装在 @supports(display: grid){} 包装器中。如果支持 Grid，浏览器将采用该格式，否则将回退到 Flexbox。

使用这种技术的最大好处是您不会遇到重叠的内容和缩放问题，而且它从一开始就完全响应。

关于这个主题有一篇关于 CSS Tricks 的文章：https://css-tricks.com/couple-takes-sticky-footer/

【讨论】：

【解决方案4】：

在你的 CSS 中的固定位置元素上试试这个：

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

【讨论】：

我已经尝试过了，但显然这将解决旧版 Safari 上的问题，而这个版本的问题是不同的。

【解决方案5】：

我遇到了同样的问题，我以我的测试人员满意的方式解决了它。不是一个完美的解决方案，但可以发挥作用。

添加一个带有一些填充或边距的空元素。

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

【讨论】：

【解决方案6】：

切换到横向模式时确实发生了一些事情，并且在 Safari 的“最小 UI”之间切换是一个窗口调整大小事件。您可以检查固定元素的getBoundingClientRect().bottom，看它是否大于window.innerHeight（这意味着固定元素不在窗口底部）。如果是这样，您可以将fixed元素的css属性bottom设置为element.getBoundingClientRect().bottom - window.innerHeight。这将保持固定元素的位置。对用户来说这似乎有点卡顿，但这比离开屏幕底部的元素要好。

【讨论】：