带有波纹动画的 ng-click 在 Safari iOS 上的点击功能与在 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>

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

可以轻松重现问题here

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

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

Answer 1

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

button > span {
   pointer-events: none; 
}