14

SafariとiOS6でまれな動作が発生しています。横向きから縦向きに変更すると、ビューポートのサイズが変更されますが、水平方向に正しく配置されていないようです。正確に128px左に移動します。

この動作は、iOS6のiPad3でwww.google.comにアクセスして再現できます。

このようにhtmlのdisplayプロパティを変更した場合：

document.querySelector（ "html"）。style.display = "none" document.querySelector（ "html"）。style.display = "block"

ビューポートが原点に戻り、正しく表示されます。だからこれはバグだと思います。

これを修正する方法はありますか？

4

5 に答える 5

10

今朝、同様の問題に気づきました。

向きが横向きから縦向きに変わったときはいつでも、体全体の要素が 100% 幅になるはずのほぼ半分左に移動します。これは、iPhone 4s で動作する iOS 6 のモバイル サファリでした。

私が持っていた全幅の検索バーにそれを釘付けにしました。このバーの親要素に、次のプロパティを配置しましたoverflow: hidden;

これで私の問題は解決しました。他のサイトを長時間調査しましたが、これで問題が解決しない場合があります。たとえば、同じ問題が発生している BestBuy.com には、私の修正が反映されていないようです。

于 2012-09-20T18:46:31.773 に答える
6

このバグは、iPhone の IOS6 にも当てはまります。

方向変更ハンドラーでプレースホルダーを削除して読み取ると、問題が解決します。このソリューションは jQuery 固有です。

$(window).on("orientationchange", fixIOS6PlaceholderBug);

function fixIOS6PlaceholderBug () {
    var $this,
        originalPlaceholder = "";

    $(document).find("input[placeholder]").each(function() {
        $this = $(this);
        originalPlaceholder = $this.attr("placeholder");
        $this.removeAttr("placeholder").attr("placeholder", originalPlaceholder);
    });
}
于 2013-02-07T17:24:05.470 に答える
2

同じバグがありますが、私の場合、理由はinput type=textwith width: 100%;でした。入力ラッパーをoverflow:hiddenバグに変更すると修正されました。

overflow:hiddenfor bodyを使用したソリューションは、iOS での慣性スクロールには適していません

于 2012-12-26T15:42:54.340 に答える
2

これのおかげで解決策を見つけました： http://www.tonylea.com/2010/safari-overflow-hidden-problem/

回転する DIV を左右に隠しているため、HTML タグに overflow:hidden がありましたが、iOS6 の Safari ではそれが受け入れられなかったようです。position:relative to HTML タグを設定すると、問題が解決しました!

于 2012-09-25T09:04:31.807 に答える
0

ボディータグにoverflow: hiddenを追加する必要がありました。

于 2014-04-01T14:59:58.853 に答える