我无法点击iDangerous Swiper和iScroll布局中的链接

Question

我使用iDangerous swiper和iScroll.js进行了布局，我发现无法点击该布局中的任何链接或提交按钮。

我以Codepen为例：http://codepen.io/anon/pen/eNzMVX

这是Swiper和iScroll的布局和初始化：

$(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
    })        
});

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;
}

<div class="main-wrap">
  <div class="content">
    <div id="slideshow" class="swiper-container">
      <div class="swiper-wrapper">

        <article class="swiper-slide page__slide--1" id="home">
          <div class="swiper-container" id="scroller--1">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <header class="header__cover">
                  <article class="header__cover--content">
                    <h1 class="beta">Slide 1</h1>
                  </article>
                  <div class="dotted"></div>
                  <div class="bg--radial-gradient-trans"></div>
                  <div class="triangle-fold"></div>
                </header>
              </div>
              <div class="swiper-slide" style="background-color: blue;">
                <div class="page__slide--content">
                  <a href="http://www.google.es">Google</a>
                </div>
              </div>
            </div>
          </div>
        </article>

        <article class="swiper-slide page__slide--2" id="empresa">
          <div class="swiper-container" id="scroller--2">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <header class="header__cover">
                  <article class="header__cover--content">
                    <h1 class="beta">Slide 2</h1>
                  </article>
                  <div class="dotted"></div>
                  <div class="bg--radial-gradient-trans"></div>
                  <div class="triangle-fold"></div>
                </header>
              </div>
              <div class="swiper-slide">
                <div class="page__slide--content"></div>
              </div>
            </div>
          </div>
        </article>
      </div>
      <!-- .slideshow__container -->
    </div>
    <!-- #slideshow -->
  </div>
</div>