单击按钮不会在Safari中触发

Question

问题 ：我有一个按钮，它的“ click”事件在Safari中仅触发2或3中的1次。 在其他所有浏览器中，每次单击按钮时都会触发其“单击”事件。

这是我的代码：

 $('button').on('click', function(){ alert("Clicked"); }); 

 button{ font-size: 1em; font-weight: 700; padding: 0.5em 1em; background: #ea5949; box-shadow: 0 4px 0 #a03d32; color: #fff; margin: 5px 3px 0 0; position: relative; text-transform: uppercase; text-align: center; border: 0 none; border-radius: 5px; cursor: pointer; outline: none; -webkit-transition: all 150ms ease; transition: all 150ms ease; display: inline-block; position: relative; top: 0px; -webkit-appearance: button; } button:hover{ top: -2px; animation: none; -webkit-animation: none; box-shadow: 0 6px 0 #a03d32; } button:active{ box-shadow: 0 1px 0 #444; top: 4px; -webkit-animation: none; animation: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Click on me</button> 

是Safari不喜欢在按钮的“活动”状态（下面的代码）期间更改“顶部”值，这可能会影响点击框。 那有意义吗？ 我可能完全错了。

button:active{
    box-shadow: 0 1px 0 #444;
    top: 4px;
    -webkit-animation: none;
    animation: none;
}

我尝试改用“ transform” CSS属性，但是问题仍然存在。

万分感谢！