html – 在Safari Mobile 10.3粘性页脚可以在屏幕上滚动

我们的移动Web应用程序具有粘性底部导航，就像您在iOS应用程序中经常发现的那样，并且在横向浏览Safari 10.3之后，只能在屏幕上滚动粘性导航(页脚)。即使它是位置：固定并设置为底部：0在旧的Safari版本上也是不可能的。

粘性导航/页脚的样式如下：

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

DEMO to try on phone

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

在横向模式下，您可以在屏幕上滚动显示顶部地址栏的大小：

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

解决方法

这是一种解决方法，而不是真正的解决方案。然而，位置：固定已成为移动设备多年的问题，克服此问题的最佳方法是使用 position: sticky。

sticky behaves like position: relative within its parent,until a
given offset threshold is met in the viewport.

来自：Stick your landings! position: sticky lands in WebKit

但是位置：粘性尚未完全支持，所以我建议也使用：

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

有关MS Edge粘性支持状态，请参阅状态here(谢谢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.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>

html – 在Safari Mobile 10.3粘性页脚可以在屏幕上滚动

解决方法

相关文章