title: I can't click on a link in iDangerous Swiper and iScroll layout
body: <p>I have a layout made with <a href="http://www.idangero.us/swiper/" rel="nofollow">iDangerous swiper</a> and <a href="http://iscrolljs.com/" rel="nofollow">iScroll.js</a> and I've found that I can't make click on any link or submit button inside of that layout.</p>
  
  <p>I have made a Codepen as an example: <a href="http://codepen.io/anon/pen/eNzMVX" rel="nofollow">http://codepen.io/anon/pen/eNzMVX</a></p>
  
  <p>This is the layout and the initialization of Swiper and iScroll:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function () {
      //initialize swiper when document ready  
      var mainSwiper = new Swiper ('#slideshow', {
          // Optional parameters
          direction: 'horizontal',
          keyboardControl: true,
          mousewheelControl: false,
          grabCursor: true,    
          loop: false
      });
      var scrollSwiper = new Swiper ('#scroller--1', {
          // Optional parameters
          scrollbar: '',
          grabCursor: true, 
          direction: 'vertical',
          keyboardControl: true,
          slidesPerView: 'auto',
          mousewheelControl: true,
          freeMode: true
      })        
  });
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  .main-wrap,
  .content {
    height: 100%;
    position: relative;
  }
  .bg--darkgrey,
  .bg--grey {
    color: #fff;
  }
  .bg--darkgrey {
    background-color: #a9a9a9;
  }
  .bg--grey {
    background-color: #4b4b4b;
  }
  .bg--radial-gradient-trans {
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: -webkit-radial-gradient(rgba(255,255,255,0), rgba(0,0,0,0.8));
    background: radial-gradient(rgba(255,255,255,0), rgba(0,0,0,0.8));
  }
  .bg--radial-gradient {
    background: -webkit-radial-gradient(rgba(255,255,255,0.2), #c1c1c1);
    background: radial-gradient(rgba(255,255,255,0.2), #c1c1c1);
  }
  .bg--linear-gradient {
    background: -webkit-linear-gradient(#c1c1c1, rgba(255,255,255,0.2));
    background: linear-gradient(#c1c1c1, rgba(255,255,255,0.2));
  }
  .header__cover {
    width: 100%;
    height: 100%;
    min-height: 200px;
    text-align: center;
    position: relative;
    background-size: cover;
  }
  .header__cover h1,
  .header__cover h2,
  .header__cover h3,
  .header__cover p {
    color: #fff;
  }
  .header__cover h1,
  .header__cover h2,
  .header__cover h3 {
    text-transform: uppercase;
  }
  .header__cover--content {
    top: 50%;
    z-index: 2;
    width: 100%;
    padding: 1em 1.5em;
    position: absolute;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .page__slide--1 {
    background-color: #f00;
  }
  .page__slide--2 {
    background-color: #008000;
  }
  .page__slide--content {
    width: 100%;
    min-height: 200px;
  }
  .swiper-container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .swiper-slide {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    -webkit-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .page__slide--content a {
    color: #fff;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="main-wrap"&gt;
    &lt;div class="content"&gt;
      &lt;div id="slideshow" class="swiper-container"&gt;
        &lt;div class="swiper-wrapper"&gt;
  
          &lt;article class="swiper-slide page__slide--1" id="home"&gt;
            &lt;div class="swiper-container" id="scroller--1"&gt;
              &lt;div class="swiper-wrapper"&gt;
                &lt;div class="swiper-slide"&gt;
                  &lt;header class="header__cover"&gt;
                    &lt;article class="header__cover--content"&gt;
                      &lt;h1 class="beta"&gt;Slide 1&lt;/h1&gt;
                    &lt;/article&gt;
                    &lt;div class="dotted"&gt;&lt;/div&gt;
                    &lt;div class="bg--radial-gradient-trans"&gt;&lt;/div&gt;
                    &lt;div class="triangle-fold"&gt;&lt;/div&gt;
                  &lt;/header&gt;
                &lt;/div&gt;
                &lt;div class="swiper-slide" style="background-color: blue;"&gt;
                  &lt;div class="page__slide--content"&gt;
                    &lt;a href="http://www.google.es"&gt;Google&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/article&gt;
  
          &lt;article class="swiper-slide page__slide--2" id="empresa"&gt;
            &lt;div class="swiper-container" id="scroller--2"&gt;
              &lt;div class="swiper-wrapper"&gt;
                &lt;div class="swiper-slide"&gt;
                  &lt;header class="header__cover"&gt;
                    &lt;article class="header__cover--content"&gt;
                      &lt;h1 class="beta"&gt;Slide 2&lt;/h1&gt;
                    &lt;/article&gt;
                    &lt;div class="dotted"&gt;&lt;/div&gt;
                    &lt;div class="bg--radial-gradient-trans"&gt;&lt;/div&gt;
                    &lt;div class="triangle-fold"&gt;&lt;/div&gt;
                  &lt;/header&gt;
                &lt;/div&gt;
                &lt;div class="swiper-slide"&gt;
                  &lt;div class="page__slide--content"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/article&gt;
        &lt;/div&gt;
        &lt;!-- .slideshow__container --&gt;
      &lt;/div&gt;
      &lt;!-- #slideshow --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>