CSS动画正在阻止iOS上的触摸事件

我用这段代码让一个元素在悬停时放大几个像素，但出于某种原因，它阻止了iOS上的触摸事件（点击）。有什么想法吗

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

---

如果问题具体出现在iOS上，则可能不是CSS转换事件阻止了触摸/点击事件。在iOS Safari中，如果您希望一个

div

有一个单击事件，它必须有一个直接绑定的

onclick

处理程序，或者CSS属性

cursor:pointer

。这就是为什么Safari知道div是“可点击的”，这是Safari的一个奇怪的小众，我认为在其他移动浏览器上是不存在的

有关更多详细信息，请参阅本文：

---

但简言之，我建议将

光标：指针添加到
.hvr grow
中，看看这是否会有所不同。您的
：hover
CSS不会在手机上注册，因此您无论如何也不会获得增长效果。
我会尝试删除translateZ、backface visibility或两者。Kyle Horkley-这是问题的根源。现在修好了。谢谢这是有帮助的，但凯尔·霍克利的评论是有效的答案。谢谢你的想法！