Html Chrome Mobile-图像突破隐藏溢出分区

当一张卡片在Chrome浏览器中的移动设备上“悬停”（点击）时，图像在CSS动画过程中会脱离其div。我能阻止吗？动画在桌面和移动Firefox上的工作方式与预期相同

.ac-image-cell {
  position: absolute;
  justify-content: center;
  display: flex;
  flex-direction: row;
  width: 150px !important;
  height: 150px !important;
  top: -55px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  margin: 0 auto 5px auto;
  border-radius: 50%;
  border: 5px solid #c9c9bb;
  background: url(http://www.nwdastore.com/wp-content/gallery/theme-images/silhouette-unisex.jpg) no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  text-align: center;
  overflow: hidden !important;
  padding: 0;
  transition: all 0.25s ease;
  z-index: 999 !important;
}

.ac-image-cell:hover {
  border-color: #7EE499;
  width: 170px !important;
  height: 170px !important;
  top: -75px;
}

.ac-image-self {
  flex: 1;
  height: 100% !important;
  max-width: none !important;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  transition: all 0.5s ease;
  z-index: 1 !important;
}

.ac-image-self:hover, .artist-card:hover .ac-image-self {
  filter: none;
  -webkit-filter: grayscale(0%);
}

.ac图像单元{
位置：绝对位置；
证明内容：中心；
显示器：flex；
弯曲方向：行；
宽度：150px！重要；
高度：150px！重要；
顶部：-55px；
左：50%；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
保证金：0自动5px自动；
边界半径：50%；
边框：5px实心#c9c9bb；
背景：url(http://www.nwdastore.com/wp-content/gallery/theme-images/silhouette-unisex.jpg)无重复中心；
背景尺寸：封面；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
文本对齐：居中；
溢出：隐藏！重要；
填充：0；
过渡：所有0.25秒缓解；
z指数：999！重要；
}
.ac图像单元：悬停{
边框颜色：#7EE499；
宽度：170px！重要；
高度：170px！重要；
顶部：-75px；
}
.ac映像自我{
弹性：1；
身高：100%！重要；
最大宽度：无！重要；
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；/*Firefox 3.5+*/
过滤器：灰色；/*IE6-9*/
-webkit过滤器：灰度（100%）；/*Chrome 19+和Safari 6+*/
过渡：所有0.5s缓解；
z指数：1！重要；
}
.ac图像自身：悬停，.艺术家卡：悬停.ac图像自身{
过滤器：无；
-webkit过滤器：灰度（0%）；
}

小提琴示例：

---

更新根据下面的答案，我尝试添加隐藏元素和圆形边框，但对Chrome没有任何影响。所以我尝试了一个z索引，以及动画链接的图像。这也不起作用，而且还改变了不再居中的图像的方向

这是因为图像位于链接标记内，您可以通过添加以下样式来防止出现这种情况：

.ac-image-cell a {
  border-radius: 50%;
  overflow: hidden;
}

---

这是因为图像位于链接标记内，因此可以通过添加以下样式来防止此情况：

.ac-image-cell a {
  border-radius: 50%;
  overflow: hidden;
}

---

不在桌面上工作。什么浏览器？在Opera、Chrome和Firefox上工作；Win10在桌面上不工作。什么浏览器？在Opera、Chrome和Firefox上工作；Win10似乎不会影响Chrome Mobile上的问题。不过，还是要感谢您的努力。您可能认为隐藏溢出元素中包含的

标记不会引起关注。似乎是其他东西在动画中触发了这一点。似乎不会影响Chrome Mobile上的问题。不过，还是要感谢您的努力。您可能认为隐藏溢出元素中包含的
标记不会引起关注。似乎是在动画中触发的其他东西。