html - Chrome Mobile - overflow hidden div 的图像突破

Question

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

示例 fiddle :https://jsfiddle.net/WASasquatch/dnhmy3Le/

UPDATE 按照下面的回答，我尝试添加隐藏元素和圆 Angular 边框，但它对 Chrome 没有影响。所以我尝试了一个 z-index，并为带有图像的链接设置了动画。这也不起作用，并且还改变了不再居中的图像的方向。

Answer 1

那是因为图片在链接标签内，你可以通过添加以下样式来防止这种情况:

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