浅谈 -webkit-tap-highlight-color 属性

这两天在做一个运营活动，是公司4周年的活动，要做一个拼蛋糕送祝福的H5页面。做完之后，发现有一个bug，就是，我在手机上（iphone5s）点击按钮的时候，屏幕总会闪动一下，这让页面看起来很不友好也不流畅。网上搜了一下，加了一句css就解决了：

-webkit-tap-highlight-color:rgba(0,0,0,0) 
//webkit是苹果浏览器引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节。

 

原因如下：

在移动端上，有事件监听的元素被点击的时候会被高亮显示，而-webkit-tap-highlight-color属性会在当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。

该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。