14

私はいくつかのテストを行いましたが、iOS6のモバイルSafariにバグがあることがわかりました。

タグを追加overflow:hiddenし、それを使用して要素を本体から移動すると、その要素用に追加のスクロール可能なスペースが作成されます。すべてのデスクトップブラウザで「非表示」になっています。bodytransform:translateX(100%);

これがデモです：http：//jsfiddle.net/mUB5d/1。モバイルサファリでそれを開くと、何が悪いのかがわかります。

誰かがMacOSのsafari6を見て、バグがそこにも存在するかどうかを確認できますか？私の要素の周りに別の親を作成する以外に、回避策を知っている人はいますか？

ご意見ありがとうございます！

4

4 に答える 4

9

いいえ。Mac上のSafari6にはバグがありません。スクロールバーはありません。

OSX Mountain Lion（10.8.2）で実行しました

ここに画像の説明を入力してください

あなたの質問にさらに答えるために、これが起こっている理由はおそらく、オーバーフローの隠れたバグよりも、MobileSafariのズームレンダリングに関係しています。要素は実際には画面から非表示になっています（右端までスクロールしたところを下に示しますが、100％幅の要素全体が表示されません。実際にはその90％が非表示になっています。

iframeやページズームと関係がある可能性があります。それでもバグのように見えます。

実際の例からJSFiddleでデモンストレーションしていると思います。実際の例（iframeテリトリーを除く）に戻る場合は、このメタタグをまだ持っていない場合は頭に追加してみてください。これが役立つことを確認してください。

<meta name="viewport" content="width=device-width, initial-scale=1">

ここに画像の説明を入力してください

于 2012-11-13T17:09:34.903 に答える
7

これはiOS（およびiOSのみ）での通常の動作です。と要素overflow: hiddenの両方を宣言することで、この問題を回避できます。さらに、本体をに設定する必要があります。htmlbodyposition: relative

オーバーフロー動作

ここではいくつかのことが行われています。修正が機能する理由を理解するには、最初にビューポートのオーバーフローがどのように設定されているかを確認する必要があります。

  • htmlビューポートのオーバーフローは、要素のオーバーフロー設定によって決定されます。
  • htmlただし、要素のオーバーフローをデフォルト（ ）のままにしておく限りvisible、ボディのオーバーフロー設定はビューポートにも適用されます。つまり、ビューポートをターゲットにするときに、htmlまたはbodyを設定できます。overflow: hiddenこれまでのところ、body要素自体のオーバーフロー動作は影響を受けません。
  • これで、要素のオーバーフローをhtml以外visibleに設定すると、からビューポートへの転送はbody発生しなくなります。特定のケースでは、両方のオーバーフローをhiddenに設定すると、html要素の設定がビューポートに適用され、body要素はそのオーバーフローも非表示にします。

これは実際には、iOSに固有のものではなく、そこにあるすべての合理的に最新のブラウザに当てはまります。

iOSの癖

現在、iOSはoverflow: hiddenビューポートを無視します。ブラウザは、CSSで何を宣言したかに関係なく、コンテンツ全体を表示する権利を留保します。これは意図的なものであり、バグではなく、iOS 7および8でも引き続き当てはまります。これについても、誰もできることはありません。オフにすることはできません。

ただし、ビューポートではなくボディ要素自体にオーバーフローを非表示にすることで、この問題を回避できます。これを実現するには、最初に要素のオーバーフローを、またはなど以外の値に設定する必要があります（iOShtmlでは、2つの間に違いはありません）。そうすれば、ボディオーバーフロー設定はビューポートに転送されず、に設定すると実際にはボディ要素に固定されます。visibleautohiddenoverflow: hidden

これで、ほとんどのコンテンツが非表示になります。ただし、例外があります。絶対的に配置される要素です。それらの最終的なオフセット親は、ボディではなくビューポートです。それらが画面の外、右または下のどこかに配置されている場合でも、それらまでスクロールできます。これを防ぐには、body要素をに設定するだけですposition: relative。これにより、配置されたコンテンツの親がオフセットされ、これらの要素がbodyボックスから外れるのを防ぐことができます。

コードで答える

注意すべき最後の落とし穴が1つあります。それは、ボディ自体がビューポートより大きくてはならないということです。

したがって、ボディはビューポートの幅と高さの100％に設定する必要があります。（これを実現するためのCSSのみの方法の功績は、このSOの回答htmlに当てはまります。）要素と要素のマージンはbody0であるhtml必要があり、パディングや境界線も含まれていてはなりません。

最後に、ボディのパディングに対処するために、そしてボディに境界線を設定したい場合は、ボディに対して数学を機能box-sizing: border-boxさせます。

だからここに行きます。

html {
  overflow: hidden;

  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

body {
  overflow: hidden;
  position: relative;

  box-sizing: border-box;
  margin: 0;
  height: 100%;
}

注意：ボディのパディングとボーダーは自由に設定できます。

于 2015-02-23T12:04:15.417 に答える
1

しばらくこれに苦労した後、オーバーフローしたコンテンツを実際に非表示にするには、タグhtmlとタグの両方がオーバーフローを非表示にする必要があることがわかりました。bodyオーバーフロー内の要素でbodyは、hiddenは正常に機能するため、追加のcssルールまたはラッパー要素を選択します。

于 2013-08-23T05:26:10.343 に答える
0

私にとってはうまくいく

左側のメニューに実装しました

if($('.left-menu-panel').is(':visible')) {$("body").addClass('left-menu-open');$("html").css('overflow-y','hidden'); $('body').click(function() {$("body").removeClass("left-menu-open") ;$("html").css('overflow-y','visible'); });$('#off-canvas-left').click(function(event){event.stopPropagation();}); }
于 2016-08-31T10:19:22.767 に答える