Iframe inside fixed size block and overflow:hidden stretch browser window on android?

Question

css

I'm building a web application here, I ran into a problem.
On the page, you need to show a scrollable iframe (including on touch devices). We know iframe sizes.

Came to the following structure:

<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 - A block with fixed dimensions (slightly smaller than the screen dimensions), it is set to overflow:hidden.
.jw-iframe-wrap is a large block, its dimensions are equal to iframe size.
Inside this block is the iframe itself.
.jw-iframe-overlay - to intercept clicks and interactions with iframe internals.
For the external block, we connect iScroll. Hurrah, problem solved.

Now the problem.
On android, when adding an iframe to the inner block, the size of the browser viewport changes to the size of the iframe, this causes a native scroll to appear on the page, the outer blocks stretch to the size of the iframe.

Fiddle , demo , similar unanswered question on Stack overflow .
Obviously, to see the problem, the first two links need to be opened in the android browser.

We tried many combinations, experimented with viewport sizes, negative margins - nothing helps. Look with a fresh look - maybe this is still not an android bug, but my cant.

Thanks in advance.

Answer 1

In my opinion, mobile browsers treat frames and iframes differently. Apple's mobile safari manual, for example, describes this. So you'd better google the android browser documentation.