背景：

最近开发一个简单的H5页面，在IOS端测试的时候发现，点击按钮会闪动，出现一个黑色的背景一闪而过，影响用户体验。 

原因：

在ios端，safari浏览器上触发click事件有300ms的延迟相应，为touch添加的样式会和click冲突而出现闪烁问题。在safari中触摸事件的相应顺序如下：

touchstart --> touchmove --> touchend --> click(300ms)

解决方案：

如何解决ios移动端开发H5页面点击按钮后出现闪烁或黑色背景呢？可试用以下样式取消click事件的默认样式来消除页面闪烁问题，给点击的元素添加一个css属性：

-webkit-tap-highlight-color:transparent;

值得一提的是，300ms的延迟主要是用于判断用户是否为双击操作 。移动端页面开发坑比较多

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/3126