title: Touch events within iFrame are not working on iOS
body: <p>Touch events like <code>touchstart</code> or <code>touchend</code> are not fired when attached to the window inside an IFrame on iOS devices.</p>
  
  <p>Here's a very simple example:</p>
  
  <p><strong>parent.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html style="height: 100%;"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Touch Test&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  &lt;body style="height: 100%; margin: 0; overflow: hidden;"&gt;
      &lt;iframe style="width: 100%; height: 100%; border: none;" src="child.html"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>child.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Touch Test&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;style&gt;    
          body {
              margin: 0;
              padding: 8px;
          }
  
          div.header {
              margin-bottom: 8px;
          }
  
          div.text-entry {
              font: 300 1rem/1.25 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif;
              color: rgb(64, 64, 64);
          }
      &lt;/style&gt;
  
      &lt;script&gt;
          window.onload = function() {
              function addEvent(event) {
                  var div = document.createElement('div');
  
                  div.className = 'text-entry';
                  div.textContent = new Date().toLocaleTimeString() + ' Event "' + event.type + '" detected';
                  document.body.appendChild(div);
              }
  
              window.addEventListener('touchstart', addEvent.bind(null), false);
              window.addEventListener('touchend',   addEvent.bind(null), false);
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="text-entry header"&gt;Clicks/touches on the viewport should add some text entries...&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've found multiple questions regarding scroll issues on iOS within IFrames and some regarding events, but none seems to have a valid solution for the issue I'm experiencing right now.</p>
  
  <p>I've created a <a href="http://codepen.io/anon/pen/vgeqLb" rel="noreferrer">CodePen</a> and a <a href="https://jsfiddle.net/7y7pzkek/2/" rel="noreferrer">JSFiddle</a> for everyone to play around which show the exact same behavior since both execute the code within an IFrame.</p>