Ссылки работают в браузере, но не работают в iPad

Я работаю над сайтом, который поддерживает жесты жесты. Внутри каждого слайда у меня есть несколько ссылок, которые пользователь может щелкнуть и перейти в разные местоположения. Проблема, и очень странная, что мои ссылки не работают в iPad. Они отлично работают в браузерах.

Я проверил все Z-Index и т.д. И даже поставил в абсолютную позицию, но безрезультатно. Мои CSS и HTML размещены, но вместо того, чтобы копировать это, я бы рекомендовал, если бы вы могли видеть структуру, которую я использую, вы можете пойти на dragend и открыть этот сайт в 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>