Ошибка изменения ориентации iOS6 Safari?

У меня редкое поведение в Safari и iOS6. При изменении от пейзажа к портрету размер видового экрана изменяется, но, похоже, он правильно расположен горизонтально. Он смещен ровно на 128 пикселей налево.

Я могу воспроизвести это поведение с iPad3 в iOS6, перейдя на www.google.com

Если вы измените свойство отображения html следующим образом:

document.querySelector( "html" ). style.display = "none" document.querySelector( "html" ). style.display = "block"

окно просмотра возвращается в исходное состояние и отображается правильно. Вот почему я думаю, что это ошибка.

Любые идеи, как это исправить?

Ответ 1

Я нашел решение благодаря этому: http://www.tonylea.com/2010/safari-overflow-hidden-problem/

У меня было переполнение: скрыто в моем теге HTML, так как у меня есть вращающиеся DIVs, скрытые слева и справа, но похоже, что Safari в iOS6 не принимал это. Позиция установки: относительно HTML-тега решает проблему для меня!

Ответ 2

Я заметил подобную проблему сегодня утром.

Ориентация в любое время изменилась с ландшафта на портрет, весь элемент тела будет сдвинут почти на полпути влево, когда она должна быть на 100% шириной. Это было мобильное сафари в iOS 6, работающее на iPhone 4s.

Я прикрепил его к панели поиска полной ширины, которая у меня была. В родительском элементе этого бара я разместил свойство overflow: hidden;

Это привело к решению моей проблемы. Я долгое время проверял другие сайты, и это может не решить вашу проблему. Например, мое исправление, похоже, не принимало BestBuy.com, которое также сталкивается с той же проблемой.

Ответ 3

Эта ошибка также относится к IOS6 на iPhone.

Удаление и чтение заполнитель в обработчике orientationchange устранит проблему. Это решение специфично для 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);
    });
}

Ответ 4

У меня такая же ошибка, но в моем случае причина была input type=text с width: 100%; и когда я изменил обертку ввода на overflow:hidden, исправлена ошибка:

Решение с overflow:hidden для тела плохо для инерционной прокрутки на iOS

Ответ 5

Мне пришлось добавить переполнение: скрыто в теге body.