IOS - iFrame перескакивает вверх при изменении css или содержимого с помощью JavaScript

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

Проблема:

Если у вас есть веб-страница, содержащая iFrame, и вы программно модифицируете документ контента iFrames, iFrame переместится в начало страницы. Однако это происходит только в том случае, если страница, перед манипуляцией DOM, находится за пределами некоторой высоты, обычно это длина больше, чем в два раза больше длины окна просмотра.

Эта проблема возникает независимо от того, изменяете ли вы структуру DOM или изменяете свойства стиля.

Эта ошибка присутствует только в iOS, включая последнюю версию с этого времени (9.2)

Ответ 1

Описание проблемы:

Проблема заключается в том, что браузеры в iOS (включая хром, поскольку он использует тот же механизм рендеринга) неправильно вычисляют высоту iFrames, это вызывает прыжки поведение, когда в браузере происходит перерисовка.

Решения:

Решение A: Добавление следующего кода в таблицу стилей iFrame разрешает проблему в большинстве случаев, хотя прокрутка для событий перетаскивания и т.д. может создавать проблемы с этим подходом.

html, body {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

Решение B: Когда содержимое iFrame визуализировалось, вы должны рассчитать высоту содержимого iFrame, а затем установить это значение явно в элементе iFrame, используя встроенный стиль в javascript. Это значение необходимо обновить по мере того, как содержимое будет изменено или добавлено в iFrame, вы должны убедиться, что высота всегда правильная, чтобы предотвратить повторение повторения.

Это создает проблемы при работе с сторонними плагинами и виджетами, которые изменяют страницу без очевидных обратных вызовов. Лучшим случаем для решения этой проблемы на данный момент является использование наблюдателей мутации.

Ответ 2

Если вы используете какой-то код, подобный этому

var doc = document.getElementById(id).contentWindow.document;
doc.open();
doc.write(data);
doc.close();

Попробуйте удалить doc.close(); Это помогло мне.