Iframe внутри блока с фиксированными размерами и overflow:hidden растягивает окно браузера на андройде?

Question

[zapav]

Строю тут веб-приложение, столкнулся с проблемой.

На странице нужно показать проскролливаемый (в том числе на тач устройствах) айфрейм. Размеры айфрейма мы знаем.



Пришел к следующей структуре:

<div class="jw-view-content"><br>
  <div class="jw-iframe-wrap"><br>
    <div class="jw-iframe-overlay"></div><br>
  </div><br>
</div><br>

.jw-view-content – Блок с фиксированными размерами(чуть меньше размеров экрана), ему задан overflow:hidden.

.jw-iframe-wrap – большой блок, его размеры равны размеру айфрейма.

Внутри этого блока – сам айфрейм.

.jw-iframe-overlay – чтобы перехватить клики и взаимодействия со внутренностями айфрейма.

Для внешнего блока подключаем iScroll. Урра, задача решена.



Теперь проблема.

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



Фидл, демо, похожий вопрос без ответа на Stack overflow.

Очевидно, чтобы увидеть проблему первые две ссылки нужно открывать в браузере андройда.



Перепробовали множество комбинаций, экспериментировали с размерами вьюпорта, отрицательными марджинами – ничего не помогает. Посмотрите свежим взглядом – может это всё таки не баг андройда, а мой косяк.



Спасибо заранее.

Answer 1

[egorinsk]

По моему, мобильные браузеры обрабатывают фреймы и ифреймы особо. В руководстве к мобильному сафари у Эппл, например, это описано. Так что вам лучше погуглить документацию к браузеру андроида.

Comments

[egorinsk]

Вот про сафари и фреймы ссылочка: developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW1