頂部的滑動菜單隱藏在Safari移動欄後面

Question

我的iOS Safari上的下拉設置存在嚴重問題。設想一個網站，頂部有一個標題。如果您點擊標題，它將滑落，就像手機上的任何通知中心一樣。我選擇的方式非常簡單。我有一個<div class="settings hide">這個CSS：

.settings{ 
    position: fixed; 
    width: 100%; 
    height: calc(100vh + 60px); 
    border-bottom-left-radius: 15px; 
    border-bottom-right-radius: 15px; 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
    z-index: 10; 
} 

.hide{ 
    top: -100vh; 
} 

現在，這使得它看起來像這樣：

現在，下一步是創建「滑動能夠」這是我」我已經完成了使用jQuery，通過添加名爲「show」的類。

.show{ 
    top: calc(0vh - 60px); 
} 

這實際上很棒。它剛剛工作！突然之間，我在iPhone上嘗試了網站，並且因爲底部欄，始終顯示，直到您滾動，我的臀部全部消失。

因爲它看起來像這樣：

獲得這麼遠嗎？我的菜單確實滑動，在任何瀏覽器中看起來都很棒，但在Safari中，它隱藏在酒吧後面，所以用戶實際上無法關閉它。

我盡我所能解決了這個問題，但沒有按照我的意願工作。 PS：我假設你知道這一點，但當你使用bottom: 0;時，它有點作用，那麼它「知道」吧，並在其正上方正確停止。但是因爲該設置是以top的位置計算的，所以does not會執行動畫，這對於我的設計是必需的。

任何幫助/解決方案表示讚賞！

Answer 1

大衛，不幸的是iOS Safari充滿了令人不快的驚喜。

其中之一是iOS Safari認爲的100vh。
iOS中的視口高度 Safari不等於窗口內部高度與Chrome或Firefox中的一樣。

E.g.在iPhone 7plus 100vh == 696px，但是window.innerHeight == 628px。
在iPhone 6上100vh == 628px，但是window.innerHeight == 559px。
依此類推...

所以解決辦法是擺脫100vh。
假設body是.settings使用100%代替父偏移：

.settings { 
    position: fixed; 
    width: 100%; 
    height: calc(100% + 60px); 
    ... 
} 

.hide { 
    top: -100%; 
} 

而且你不需要在你的.show類使用calc（因爲0vh === 0）：

.show { 
    top: -60px; 
}