javascript - Safari iOS 上的点击功能与 PC 上的点击功能不同，带有波纹动画的 ng-click

Question

我在 iOS 上的 Safari 上遇到了 ng-click 的奇怪问题。我有三个带有悬停动画的 ng-click 处理程序的按钮。

<div class="switcher switcher--3buttons">
    <button ng-repeat="item in $ctrl.items track by $index" ng-click="$ctrl.onChange({ index: $index })"
        class="switcher-tab is-active"
        ng-class="{ 'is-active': $ctrl.chosen == item.value || $ctrl.selectedIndex === $index }"
        ng-disabled="item.disabled">
        <span class="tab-text">D</span>
    </button>
    <button ng-repeat="item in $ctrl.items track by $index" ng-click="$ctrl.onChange({ index: $index })"
        class="switcher-tab"
        ng-class="{ 'is-active': $ctrl.chosen == item.value || $ctrl.selectedIndex === $index }"
        ng-disabled="item.disabled">
        <span class="tab-text">W</span></button>
    <button ng-repeat="item in $ctrl.items track by $index" ng-click="$ctrl.onChange({ index: $index })"
        class="switcher-tab"
        ng-class="{ 'is-active': $ctrl.chosen == item.value || $ctrl.selectedIndex === $index }"
        ng-disabled="item.disabled">
        <span class="tab-text">M</span>
   </button>

问题在于长按与短按。在 PC 上，两者都具有所需的效果 - 悬停动画随所选值的变化而变化。在 Safari 上，轻轻点击触控板时行为正确，长时间点击会产生正确的悬停动画，但所选值的变化不正确。

可以轻松重现问题 here

我怀疑 Force Touch ，但我不确定，因为我没有气泡动画。

我完全愿意接受如何解决问题的建议

Answer 1

问题出现在 Safari 上是因为按钮内部的跨度带有波纹效果动画。修复是纯 CSS:

button > span {
   pointer-events: none; 
}