Javascript Safari iOS上的点击功能与PC上的ng click with ripple动画不同

我在iOS上点击Safari时遇到了一个奇怪的问题。我有三个按钮与ng点击处理与动画悬停

<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上，当在轨迹板上轻轻单击时，您的行为是正确的，较长的单击会产生正确的悬停动画，但所选值的更改不正确

人们可以很容易地重现这个问题

我有一个怀疑，但我不确定，因为我没有泡沫动画

---

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

问题发生在Safari上，因为按钮内部带有连锁反应动画。修复程序是纯CSS：

button > span {
   pointer-events: none; 
}

---

这对于其他ripple动画库也是一个很好的提示！