html - Chrome移动版-隐藏的溢出div的图像破裂

当卡片在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%);
}

小提琴示例：https://jsfiddle.net/WASasquatch/dnhmy3Le/

更新按照下面的答案，我试图添加隐藏的元素和圆角的边框，但对Chrome无效。因此，我尝试了z-index，并为与图片的链接设置了动画。这也不起作用，并且还更改了不再居中的图像的方向。

最佳答案

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

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