单击Safari iOS的功能与使用Ripple Animation使用NG-CLICK在PC上的功能不同

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>

问题是长时间点击vs短点击。在PC上，两者都具有理想的效果 - 悬停动画，并具有所选值的变化。在Safari上，您在轨道上轻轻点击时具有正确的行为，更长的点击会导致正确的悬停动画，但没有正确的更改。

一个人可以在此处轻松复制该问题

我怀疑力触摸，但我不确定，因为我没有泡沫动画。

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

Answer 1

该问题发生在Safari上，因为该按钮内部的内部跨度带有波纹效果动画。修复程序是纯CSS：

button > span {
   pointer-events: none; 
}