问题描述

在 Safari 浏览器的 MacOS 版本中，当一个按钮设置了 disabled 属性时，在用户点击按钮时，仍然会显示点击动画。

原因分析

在 Safari 浏览器的 MacOS 版本中，按钮的点击动画是由系统级别的 CSS 样式规则控制的。当按钮设置了 disabled 属性时，该属性会影响按钮的样式，但并不会影响系统级别的样式规则。因此，按钮在被点击时，仍然会触发系统级别的样式规则，从而显示点击动画。

解决方案

为了避免按钮在被点击时显示动画，可以通过 CSS 样式规则来控制。具体做法是，在按钮上添加以下样式规则：

button[disabled] {
  -webkit-animation: none;
  animation: none;
}

该样式规则会禁用按钮的动画效果，从而解决了按钮在被点击时仍然显示动画的问题。

另外，有些程序员可能会通过 JavaScript 来解决这个问题，例如在按钮点击事件中添加以下语句：

document.activeElement.blur();

这条语句的作用是，取消按钮的焦点，从而可以避免按钮在被点击时显示动画。但是这种做法有一定的局限性，因为它只是在用户点击按钮时起作用，而不能防止按钮在通过其他方式触发点击事件时显示动画。

因此，推荐使用 CSS 样式规则来解决这个问题。