在IOS8 Safari中,有一个新的位置修复错误.
如果您聚焦固定面板中的文本区域,Safari会将您滚动到页面底部.
这使得所有类型的UI都无法使用,因为您无法将文本输入textareas而无需将页面一直向下滚动并丢失位置.
有没有办法干净地解决这个bug?
#a {
height: 10000px;
background: linear-gradient(red, blue);
}
#b {
position: fixed;
bottom: 20px;
left: 10%;
width: 100%;
height: 300px;
}
textarea {
width: 80%;
height: 300px;
}
Run Code Online (Sandbox Code Playgroud)
<html>
<body>
<div id="a"></div>
<div id="b"><textarea></textarea></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud) 据我所知,移动safari在固定元素周围有很多错误,但在大多数情况下,我已经设法让我的布局正常工作,直到我在底部的固定导航中添加了一个非常需要的文本输入.现在,当用户关注文本输入元素并出现虚拟键盘时,我的导航(否则始终固定在页面底部)会跳到页面中间的一个非常奇怪的位置.

我会在这篇文章中添加一些代码,但我不确定从哪里开始.导航固定在底部,位于左侧和底部0,宽度为100%.从那里,我不知道发生了什么,我只能假设它是一个移动的safari bug.
只有当文本输入元素被聚焦并且虚拟键盘打开时,它似乎也会失去它的位置固定并变得相对.
由于我是CSS的新手,因此很难理解文档.那么有人可以解释position:sticky和之间的实际区别position:fixed吗?我也很感激一个例子.
我已经浏览了https://developer.mozilla.org/en-US/docs/Web/CSS/position和其他一些文章,但我仍然没有得到它.
我们的移动网络应用程序具有粘性底部导航功能,就像您在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);
}
Run Code Online (Sandbox Code Playgroud)
在纵向模式下,它始终可见:
在横向模式下,您可以在屏幕上滚动显示顶部地址栏的大小:
有人遇到过这样的问题吗?我将不胜感激任何帮助使页脚留在屏幕上.谢谢