title: iframe prevents iScroll scrolling on mobile Safari
body: <p>I am using iScroll on my mobile enable website (using iPhone here) to scroll inside a div.</p>
  
  <p>In this this div, I have an iframe with a fixed height like this:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="iscroller"&gt;
      &lt;iframe id="theIframe"&gt;&lt;/iframe&gt;
      Other stuff
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Now, while scrolling within the div, everything works as expected but I cannot scroll when the scrolling gesture <strong>begins on the iframe</strong>.</p>
  
  <p>The problem is described here pretty well: <a href="https://github.com/cubiq/iscroll/issues/41">https://github.com/cubiq/iscroll/issues/41</a></p>
  
  <p>So, I used the css workaround from that post by applying <code>pointer-events:none</code> to the iframe.</p>
  
  <p>Now scrolling works perfectly <strong>but</strong> I cannot click any links which are defined within the iframe because all click/touch events on the iframe seems to be blocked due to <code>pointer-events: none</code>.</p>
  
  <p>So, I thought:</p>
  
  <blockquote>
    <p>"Ok, while the user scrolls, I need <code>pointer-events:none</code>. If he is
    not scrolling (and instead clicking), I must set <code>pointer-events:auto</code>
    in order to let the click/touch events pass."</p>
  </blockquote>
  
  <p>So I did this:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#theIframe{pointer-events:none}
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$("#theIframe").bind("touchstart", function(){
    // Enable click before click is triggered
    $(this).css("pointer-events", "auto");
  });
  
  $("#theIframe").bind("touchmove", function(){
    // Disable click/touch events while scrolling
    $(this).css("pointer-events", "none");
  });
  </code></pre>
  
  <p>Even adding this doesn't work:</p>
  
  <pre><code>$("#theIframe").bind("touchend", function(){
    // Re-enable click/touch events after releasing
    $(this).css("pointer-events", "auto");
  });
  </code></pre>
  
  <p>No matter what I do: Either scrolling doesn't work or clicking the link inside the iframe doesn't work.</p>
  
  <p>Doesn't work. Any ideas?</p>