iOS5（Safari），「位置：固定」div和高度表格的錯誤

全部，iOS5（Safari），「位置：固定」div和高度表格的錯誤

我正在研究一個包含非常「高」形式的Web應用程序。意味着它比典型的屏幕）高百分之幾百。

的設計要求掛靠在這總是可見，無論用戶在表單位置的屏幕底部的「頁腳」。

在換句話說，無論用戶是靠近窗體的頂部，中間還是底部，頁腳都應該是可見的，並且窗體應該滾動「在其下面」

爲了實現這一點，我創建了頁腳作爲與position:fixed和bottom:0的div。

這適用於我測試過的所有瀏覽器，包括iOS5上的Safari。

除了有ONE錯誤......

如果用戶靠近窗體的頂部，將焦點聚集到文本字段中 - 如預期，顯示的iOS鍵盤。

每次用戶點擊下一步按鈕，iOS「標籤」她到下一個字段。

隨着她通過反覆點擊下一個，表格向下滾動，所以她在窗體上的位置仍然在視圖中。

但是，iOS似乎沒有更新position:fixed頁腳div的位置 - 它與表格的其餘部分一起錯誤地向上滾動。

如果用戶關閉鍵盤，div會恢復到它的「正確」位置，所以這不是一個不可恢復的錯誤。但是，頁腳移動的事實是一個明顯的問題。

這是iOS的實施position:fixed的缺陷或缺點嗎？或者，我做錯了什麼？

非常感謝提前！

[更新]

雷米夏普（適當命名的）剛剛寫了各種錯誤和與position:fixed在iOS/Safari瀏覽器問題的一個很好的和詳細的崗位：http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/。這是，如果你想在面向iOS用戶網站使用position:fixed一個必讀...

來源

2012-05-23 mattstuehler

我知道position:fixed最初未在iOS中的早期版本的支持，我知道iOS5的不支持它，但我有過去有過問題。如果您的頁腳是某種控制欄，那麼我會建議使用CSS粘頁腳，然後可以將所有頁面/內容加載到上面的div。

來源

2012-05-23 22:32:02 dciso

你使用jQuery嗎？如果是這樣，我懷疑這樣的工作的工作：

$(":input").focus(function() { 
    $(window).scrollTop($(window).scrollTop() + 1); 
});

通過關注一個新的表單元素後滾動頁面1px的它應該復位固定元素的底部屬性。

來源

2012-05-23 22:33:43

下面是修復程序，沒有頁腳跳到你身上。

首先將標題和正文/節包裝在div中。使該div可滾動。
比你絕對的位置和位置相對一切。
添加固定高度。

看到它在這裏工作，http://yinnetteolivo.com/footerbottom.html

您的歡迎:)

來源

2012-05-25 00:09:33 Yinnette

Yinnette，這是一個很好的解決方案。但是，它的問題（除非我誤解），它需要我有一個固定的身體高度。這在非iOS設備上是不可能的，窗口可以調整大小。（另外，有傳言說iPhone 5的屏幕高度可能與之前的型號不同，這也意味着我不應該假設身體部分具有固定的高度。）我意識到我可以使用JavaScript來調整身體高度窗口調整大小的事件，但那變得非常janky ... – mattstuehler

我發現了這個bug其他的答案中沒有一個爲我工作。我可以簡單地通過將頁面向上滾動34px來修復它，移動Safari瀏覽器會將其滾動下來。與jquery：

$('.search-form').on('focusin', function(){ 
    $(window).scrollTop($(window).scrollTop() + 34); 
});

這顯然會在所有瀏覽器中生效，但它可以防止它在iOS中突破。

來源

2012-08-30 16:52:22 NealJMD

iOS5（Safari），「位置：固定」div和高度表格的錯誤

回答

相關問題