Строю тут веб-приложение, столкнулся с проблемой.
На странице нужно показать проскролливаемый (в том числе на тач устройствах) айфрейм. Размеры айфрейма мы знаем.
Пришел к следующей структуре:
<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.
Очевидно, чтобы увидеть проблему первые две ссылки нужно открывать в браузере андройда.
Перепробовали множество комбинаций, экспериментировали с размерами вьюпорта, отрицательными марджинами – ничего не помогает. Посмотрите свежим взглядом – может это всё таки не баг андройда, а мой косяк.
Спасибо заранее.
Сложный
