Recently, when I was working on a mobile terminal project, I found that when I added click effect to the button through pseudo class :active, it was invalid under iOS, but normal under PC.

1. Failure reason

The answer can be found in Safari Developer Library, described as follows:

“You can also use the -webkit-tap-highlight-color CSS property in combination with setting a touch event to configure buttons to behave similar to the desktop. On iOS, mouse events are sent so quickly that the down or active state is never received. Therefore, The :active pseudo state is triggered only when there is a touch event set on the HTML element — for example, When onTouchStart is set on the element as follows:”

< p style="-webkit-tap-highlight-color: rgba(0,0,0); box-sizing: border-box! Important; > Testing Touch on iOS </button>Copy the code

“Now when the button is tapped and held on iOS, The button changes to the Specified color without the surrounding gray color appearing.”

On iOS, the mouse event is too fast to trigger the button and active state. Therefore,:active state can only be triggered on the element with the Touch event set. For details, see the red part marked above.

2. Solutions

1) Like above:
<button ontouchstart="" >Testing Touch on iOS</button>
Copy the code
2) The other option is to bind the TouchStart event on docuemnt
document.addEventListener("touchstart", function() {
   // do nothing
},false);
Copy the code