在iPad上点击/悬停有时无法正常工作

Question

我试图对图像进行简单的悬停效果。它在桌面上运行良好，但在iPad上有问题。当我尝试点击右图时，此图像的右侧不会影响点击，叠加层无法显示。但左图和右图的左侧显示叠加在点击罚款。也许有人可以解释这种奇怪的行为？

HTML

<div class="col-sm-6 team-wrap">
  <div class="team-member text-center">
    <div class="team-img">
      <img src="" alt="">
      <div class="overlay"></div>
    </div>
    <h4 class="team-title">David Geller</h4>
    <span>CEO of Company</span>
  </div>
</div>
<div class="col-sm-6 team-wrap">
  <div class="team-member text-center">
    <div class="team-img">
      <img src="" alt="">
      <div class="overlay"></div>
    </div>
    <h4 class="team-title">David Geller</h4>
    <span>CEO of Company</span>
  </div>
</div>

的CSS：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.col-sm-6 {
  width: 50%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

.team-img img {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  overflow: hidden;
  width: 100%;
}

.team-member,
.team-img {
  position: relative;
  overflow: hidden;
}

.team-title {
  margin: 34px 0 8px;
}

.overlay {
  background-color: rgba(20,20,20,.7);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  overflow: hidden;
}

.team-img:hover .overlay {
  opacity: 1;
}

Codepen链接：

http://codepen.io/anon/pen/ZQOKGG