2017-06-25 30 views
0

現在、ユーザーが小さな画面(たとえばIphone 5)を使用しているときに、Safariでフルスクリーンポップアップを表示しようとしています。クロムではこれは期待通りに動作しますが、この作業をサファリで行う方法を理解できないようです。Safariでオーバーフローが表示されたポップアップを表示させない

アイデアは、ポップアップはデバイスの画面全体を占有し、ポップアップの内容だけをスクロールしてください(つまり、HTMLドキュメント全体ではないので)。

See the jsbin for full code.

これはいくつかの理由でクロム上ではなく、サファリで動作述べたように...

私は複数の記事をスキャンして、あなたは身体とhtmlの両方に以下を適用する必要があることがわかりました。しかしこれは問題を解決しません。

.no-overflow { 
    overflow: hidden; 
    position: relative; 
    height: 100vh; 
} 
+0

あなたがここでの問題を示してマークアップではなく、誰も助けない明日を変更したり、消えることができますフィドルの最小限の例を投稿するために必要とされています。このため、[MCVE] – Rob

答えて

2

私はこの問題に遭遇しましたが、私はGoogleでこのエラーを解決する2つの方法を見つけました。

=============================

最初の方法:

編集CSS:

body { 
    position: relative; 
    overflow-y: hidden; 
} 

が、私の環境では、この方法では動作しませんでした。

第二の方法:

編集CSS:

body { 
    position: fixed; 
    overflow-y: hidden; 
} 

しかし、この方法は、レイアウトを動揺されます。

=========================

私は他の方法を試し始めました。私は最終的に私のチームと解決策を見つけました。

編集CSS:

​​
+0

感謝!できるだけ早く試してみるよ! – NealVDV

+0

私はこれを試しましたが、私たちにとってはうまくいきませんでした。 'hidden-div'で確認するだけでポップアップを意味しますか? – NealVDV

関連する問題