疑难杂症之iOS下 异常点击反馈

周五的晚上，同事忽然遇到一个问题，iOS下点击某个H5的checkbox（安卓下🈚️），会出现一个点击反馈态（浅灰色方形，快速消失），同事求助于俺。俺看了一下解决了✌️，是封装的组件底添加了cursor: pointer;导致的。

问题复现：移动端+iOS的ua

复现核心代码

// html
<div class="dv" id="div">添加div点击
    <input type="checkbox">
</div>
// css
.dv {
    padding: 20px;
    cursor: pointer;
}

分析：

移动端下添加了cursor: pointer;，此时触发-webkit-tap-highlight-color的一些特性：

修复方案：

/* 方案一 */
cursor: default;(或者 none 等)
/* 方案二 */
-webkit-tap-highlight-color: transparent;