在Safari Mobile 10.3粘性页脚可以滚动屏幕 [英] On Safari Mobile 10.3 sticky footer can be scrolled off the screen
问题描述
我们的移动网络应用程序具有粘性底部导航功能，就像您在iOS应用程序中经常发现的那样，在Safari 10.3发布仅在横向之后，可以在屏幕上滚动粘性导航（页脚）。即使它是 position：fixed 并设置 bottom：0 它也不适用于较旧的Safari版本。
粘性导航/页脚的样式如下：
footer {
职位：固定;
身高：50px;
左：0;
右：0;
底部：0;
背景：rgba（255,0,0,0.7）;
}
在横向模式下，您可以在屏幕上滚动显示顶部地址栏的大小：
有没有人遇到过此类问题？我将不胜感激任何帮助使页脚留在屏幕上。谢谢
这是一种解决方法而不是真正的解决方案。但是 position：fixed 多年来一直是移动设备的问题，解决这个问题的最佳方法是使用
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; / *目前正在开发MS Edge * /位置：-webkit-sticky;位置：-moz-sticky;位置：-o-sticky;身高：50px;上：80％; background：rgba（255,0,0,0.7）;}
<！DOCTYPE html>< html>< head> < meta charset =utf-8> < meta name =viewportcontent =width = device-width> < title> JS Bin< / title>< / head>< body> <页脚> < / footer>< / body>< / html>
Our mobile web application has sticky bottom navigation like the one you often find in iOS applications, and after Safari 10.3 release on landscape only it is possible to scroll sticky navigation (footer) off the screen. Even though it is position: fixed and set bottom: 0 it also wasn't possible on older Safari versions.
Styles for sticky nav / footer are following:
footer {
position: fixed;
height: 50px;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 0, 0, 0.7);
}
In portrait mode it is always visible:
In landscape mode you can scroll it off screen for the size of top address bar:
Has anyone come across such issue? I would appreciate any help to make footer stay on the screen. Thanks
This is more a workaround than a real solution. However position: fixed has been a problem for mobile devices for years and the best way to overcome this problem is to use position: sticky.
stickybehaves likeposition: relativewithin its parent, until a given offset threshold is met in the viewport.
From: Stick your landings! position: sticky lands in WebKit
However position: sticky is not fully supported yet, so I would suggest to use also:
position: sticky; /* currently in development for MS Edge */
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
See status here for MS Edge sticky support status (thank you 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>
这篇关于在Safari Mobile 10.3粘性页脚可以滚动屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
