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

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

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

原因如下:

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

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

原文地址:https://www.cnblogs.com/qshuyan/p/7729195.html