Safariモバイルバーの背後にあるメニューをスライドさせて表示します

Question

iOS Safariのドロップダウン設定に重大な問題があります。トップにヘッダーがあるウェブサイトを想像してみてください。ヘッダーをクリックすると、携帯電話の通知センターと同様にスライドします。私が選んだ方法はとても簡単でした。私はこのCSSで<div class="settings hide">を持っています。今

.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; 
} 

、これはそうのように見える：今

は、次のステップは、 "スライド可能な" I」は、それを作成することでしたjQueryを使って、 "show"というクラスを追加しました。

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

これは実際には素晴らしいものでした。それはちょうど働いた！突然私は自分のiPhoneでウェブサイトを試してみました。下のバーのために、あなたがスクロールするまで常に表示されていました。

それは次のようになりますので：

これまでのところ、それを取得しますか？私のメニューは正しくスライドしていて、どんなブラウザでも見栄えが良いですが、Safariではバーのすぐ後ろに隠れているので、実際には閉じられません。

私はこの問題を解決するために最善を尽くしましたが、本当に私が望むように機能しました。

PS：私はそれを知っていると思っていますが、bottom: 0;を使用するとちょっとしたことがあります。しかし、設定はtopポジションで計算されているので、does notは私のデザインに必要なアニメーションを行います。

ヘルプ/解決方法

Answer 1

David、残念ながら、iOS Safariは不愉快な驚きでいっぱいです。

iOS Safariが考えているのは100vhです。
iOS Safariのビューポートの高さは、ChromeまたはFirefoxの場合と同じウィンドウの内側の高さと同じではありません。

など。 iPhone 7plus 100vh == 696pxでも、window.innerHeight == 628pxです。
iPhone 6の場合100vh == 628pxしかし、window.innerHeight == 559pxです。
など...

解決策は、100vhを取り除いています。

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

.hide { 
    top: -100%; 
} 

はまた、あなたがあなたの.showクラスでcalcを使用する必要はありません（0vh以降=== 0）：：

.show { 
    top: -60px; 
}