arichter83/index.html

## index.html
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" class="no-js" xml:lang="de" lang="de">
  <head>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  </head>
  <body>

    External website where I can only control the integration (style & iframe):

    <style>
      .iframe {
          width: 100%;
          height: 500px;
          border: 1px solid;

          -webkit-transform:translate3d(0,0,0);
      }
    </style>

    This iFrame works fine:
    <iframe class="iframe" src="widget.html"></iframe>

    <div style="height:300px;background:#CCF">
      content in index.html that moves second iFrame out of view
    </div>

    This iFrame is not rendered works fine:
    <div style="height:600px;">
      <iframe class="iframe" src="widget.html"></iframe>
    </div>
    More content.

  </body>
</html>

## widget.html
<html><head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" href="widget.css">
</head>
<body style="-webkit-transform: translate3d(0, 0, 0)">

<style>

  .scrollable {
    padding: 10px;

    position: fixed;
    top: 50px;
    right: 0;
    bottom: 0;
    left: 0;

    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-color: #F99;

    -webkit-transform:translate3d(0,0,0);
  }

  body {
    -webkit-transform: translate3d(0, 0, 0);
  }

</style>

<div style="height: 50px;background:#FFA;">
  This is the "sticky" header of the iFrame, below should be scrollable!
</div>

<div class="scrollable">
  <div style="height:700px">
    This is some longer content that should be scrollable...
    if the iFrame is rendered out of view on page load, it will not
    shown on iOS until touched. This is reproducable in XCode Simulator.
    <br /><br /><br />
    scroll...
    <br /><br /><br />
    scroll...
    <br /><br /><br />
    scroll...
    <br /><br /><br />
    scroll...
    <br /><br /><br />
    scroll...
    <br /><br /><br />
    scroll...
    <br /><br /><br />
    scroll...
  </div>
</div>

</body></html>
	<!doctype html>
	<html xmlns="http://www.w3.org/1999/xhtml" class="no-js" xml:lang="de" lang="de">
	<head>
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	</head>
	<body>

	External website where I can only control the integration (style & iframe):

	<style>
	.iframe {
	width: 100%;
	height: 500px;
	border: 1px solid;

	-webkit-transform:translate3d(0,0,0);
	}
	</style>

	This iFrame works fine:
	<iframe class="iframe" src="widget.html"></iframe>

	<div style="height:300px;background:#CCF">
	content in index.html that moves second iFrame out of view
	</div>

	This iFrame is not rendered works fine:
	<div style="height:600px;">
	<iframe class="iframe" src="widget.html"></iframe>
	</div>
	More content.

	</body>
	</html>
	<html><head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" type="text/css" href="widget.css">
	</head>
	<body style="-webkit-transform: translate3d(0, 0, 0)">

	<style>

	.scrollable {
	padding: 10px;

	position: fixed;
	top: 50px;
	right: 0;
	bottom: 0;
	left: 0;

	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	background-color: #F99;

	-webkit-transform:translate3d(0,0,0);
	}

	body {
	-webkit-transform: translate3d(0, 0, 0);
	}

	</style>

	<div style="height: 50px;background:#FFA;">
	This is the "sticky" header of the iFrame, below should be scrollable!
	</div>

	<div class="scrollable">
	<div style="height:700px">
	This is some longer content that should be scrollable...
	if the iFrame is rendered out of view on page load, it will not
	shown on iOS until touched. This is reproducable in XCode Simulator.
	<br /><br /><br />
	scroll...
	<br /><br /><br />
	scroll...
	<br /><br /><br />
	scroll...
	<br /><br /><br />
	scroll...
	<br /><br /><br />
	scroll...
	<br /><br /><br />
	scroll...
	<br /><br /><br />
	scroll...
	</div>
	</div>

	</body></html>