移动端一个奇怪的触摸bug

2022-11-23,,

这两天遇到一个很奇怪的bug,在移动端,一个页面里所有的input框都不能点击,我查了一下,里面的没有设置readonly属性,只要页面滚动一下就可以用了,而且,只要我在真机测试的时候,f12开发者模式下,一旦选中这个元素也可以点击了,很奇怪,结果我就去公共样式里排查,home.css。结果定位到了这么一段我很不熟悉的代码片段

/* -webkit-user-drag: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-tap-highlight-color: rgba(0, 0, 0, 0);
-o-tap-highlight-color: rgba(0, 0, 0, 0);
tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden; */
/* -webkit-tap-highlight-color: transparent;
-moz-tap-highlight-color: transparent;
-ms-tap-highlight-color: transparent;
-o-tap-highlight-color: transparent;
tap-highlight-color: transparent; */

 很神奇,这些属性只会影响到安卓手机,对ios的手机没啥影响,注释掉之后就好,能正常点击了

移动端一个奇怪的触摸bug的相关教程结束。

《移动端一个奇怪的触摸bug.doc》

下载本文的Word格式文档,以方便收藏与打印。