基本上有这样的风格
doAfterCompose()我正在寻求支持常青和IE10 / 11，Chrome for Android（4.4+），Mobile Safari（iOS 7+），它不应该影响其他触摸事件（滑动滚动）。
它似乎在Android和Chrome设备模拟上有效，触摸时非粘性变换是理想的行为。
但不知何故，这个plunker在iOS webkit（iOS 8，所有浏览器）上都不起作用，它在触摸时什么都不做。我非常确定完全相同的方法（块元素，.hover-block {
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.hover-block:active {
pointer-events: none;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.hover-block:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
:active加pointer-events: none）之前在iOS 8中适用于我。如何解决？
它看起来像空 touchstart / touchend JS事件处理程序或:hover / ontouchstart属性can activate touch behaviour on iOS（不能确定但它可能是发生在我之前）。它是一个已知的问题解决方案，还是有较少的hacky，iOS版本会受到影响？
答案 0 :(得分：3)
所以你遇到的问题是：“:active pseudo class matches when an element is being activated by the user”。用户无法激活独立的<div>元素，因此:active伪类不会匹配。
如果您在:active MDN文章的Browser Compatibility下查看，您会看到：
[1]默认情况下，除非相关元素或
touchstart上有<body>事件处理程序，否则Safari Mobile不会使用：active状态。
MDN有一个list of pseudo classes可供使用，您可以找到一个更适合您的情况，或者添加一个touchstart事件应该在Safari中执行。
通过将<div class="hover-block"></div>元素更改为<button class="hover-block"></button>并将.hover-block:active {更改为.hover-block:focus {，我能够让您的plnkr快速工作。我还将display: block; border: 0;添加到.hover-block。
由于显而易见的原因，您可能不希望将<div>更改为<button>以使您的效果有效，但是通过使用可以使用不同伪类激活的元素，或添加允许在目标浏览器中激活的事件，您应该能够在移动设备上实现所需的效果。
希望有所帮助！
答案 1 :(得分：3)
在您的HTML中，而不是<body>，<body ontouchstart="">
或者在html5中，只需<body ontouchstart>