jquery - リンクはブラウザでは機能しますが、iPad では機能しません

Question

スワイプジェスチャをサポートする Web サイトに取り組んでいます。各スライド内には、ユーザーがクリックして別の場所を参照できるリンクがいくつかあります。非常に奇妙な問題は、リンクが iPad で機能しないことです。それらはブラウザで完全に機能します。

私はすべてのZ-Indexなどをチェックし、絶対位置にも入れましたが、役に立ちませんでした. 私の CSS と HTML が投稿されていますが、これをコピーする代わりに、私が使用しているフレームワークを確認できる場合は、dragondにアクセスして iPad でこのサイトを開くことをお勧めします。リンクをクリックすると、このサイトのリンクが iPad では機能せず、通常のブラウザでは機能することに驚かれることでしょう。

CSS

#contend {
  border-top: 13rem solid transparent;
  /*border-bottom: 4rem solid transparent;*/

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#swipe-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;

  -webkit-transition: opacity 0.6s ease-in-out;
  -moz-transition: opacity 0.6s ease-in-out;
  -o-transition: opacity 0.6s ease-in-out;
  -ms-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;


  cursor: hand;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  cursor: grab;
}

.confine {
  max-width: 100%;
} 

#swipe-container .page-content {
  padding: 2rem 6rem;
  position: relative;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
  width: 100%;
  height: 100%;
}

#swipe-container .page-content:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

#swipe-container p {
  font-size: 1.5rem;
  line-height: 2.6rem;
  margin-bottom: 2rem;
  border-radius: 5px;
}

.page-content p,.page-content ul,h3 {
  background: rgba(242,242,242,0.4);

  -webkit-box-shadow: 0 0 50px rgba(242,242,242,0.4);
  box-shadow: 0 0 50px rgba(242,242,242,0.4);
}

#swipe-container > div > ul ul {
  margin: 0 0 2rem 2.5rem;
  font-size: 1.7rem;
  line-height: 2.3rem;
}

#swipe-container > div {
  list-style: none;
  background: url(../imgs/bgbg.png) repeat-x 0 0;
  background-color: #fff;
}

#swipe-container > div > ul {
  padding: 0;
}

#swipe-container li {
  margin-bottom: 0.5rem;
}

.page {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 5px solid transparent !important;
  border-bottom: 20px solid transparent !important;
}

#pos2{
    position:fixed;
    display: block;
    overflow:hidden;
-webkit-overflow-scrolling:touch;
    width:50px;
    height:50px;

    background-color: yellow;
}
#pos1:hover, #pos2:hover{
    border:1px solid red;
}

HTML

 <div id="contend">
    <div id="swipe-container">
      <ul id="pages">
       <!-- meet the team-->

        <li class="page">
          <div class="page-content">

              <div class="link-slide-team">
                  <a href="cnn.com"> <div id="pos1"></div></a>
                  <a> <div id="pos2"></div></a>
              </div>

          </div>
        </li>

      </ul>
    </div>
</div>