iOS5(Safari)的一个错误,"位置:固定"div和高大的形式

Question

所有,

我正在开发一个包含非常"高"形式的Web应用程序.(高,这意味着它比典型的屏幕高几百%).

无论用户在表单中的位置如何,该设计都需要一个固定在屏幕底部的"页脚",它始终可见.

换句话说,无论用户是在靠近表单的顶部,中间还是底部,页脚都应该是可见的,并且表单应该在其下面滚动.

为了实现这一点,我创建了一个div作为div position:fixed,和bottom:0.

这适用于我测试过的所有浏览器,包括iOS5上的Safari.

除了有一个 bug ...

如果用户位于表单顶部附近,并将焦点放在其中一个文本字段上 - 正如预期的那样,iOS会显示键盘.

每次用户单击" 下一步"按钮时,iOS"选中"她到下一个字段.

当她通过反复单击" 下一步 " 向下进入表单时,iOS会自动"向上滚动"表单,因此她在表单上的位置仍然在视图中.

但是,iOS似乎没有更新position:fixed页脚div 的位置- 它与表单的其余部分一起错误地向上滚动.

如果用户解除键盘,div将恢复到"正确"的位置,因此这不是一个不可恢复的错误.但是,页脚移动的事实是一个明显的问题.

这是iOS实现的错误还是缺点position:fixed？或者,有什么我做错了吗？

提前谢谢了!

[UPDATE]

Remy Sharp(恰当地命名)刚刚position:fixed在iOS/Safari上撰写了一篇关于各种错误和问题的精彩而详细的帖子:http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling -on-ios /.如果您正在考虑position:fixed在针对iOS用户的网站上使用,那么这是必读的...

Answer 1

我知道position:fixed早期版本的 iOS 最初不支持这一点，我知道 iOS5 确实支持它，但我过去遇到过问题。如果你的页脚是某种控制栏，那么我建议使用 CSS 粘性页脚，然后所有页面/内容都可以加载到div上面。