标签

Android版微信处理 -webkit-user-select 出现的Bug

今天遇到一个微信的 Bug ,需要多个条件才会触发。

  • Android手机
  • 微信环境下
  • 给 button 加 -webkit-user-select: none;(不用 button,用 a 标签也一样)
  • button 后不论套多少层,只要是最近的的文字打头的数字部分是 160 开头的 8 位数字
  • 点 button 的文字部分

就会蹦出拨号菜单……

用微信扫二维码可见效果:
微信扫描二维码

代码如下:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta content="telephone=no" name="format-detection">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
</head>
<body>

<style>
.btn {
  -webkit-user-select: none;
  width: 100%;
}
</style>

<button class="btn">点我</button>

16000000结束

<body>
</html>

当然,手机号也会弹出。


我认为,这就是个Bug。

因为在头部,已经设置了:<meta content="telephone=no" name="format-detection">,浏览器不会把数字自动解析为电话号码。

按钮与后面的字符互相独立,也没有任何关联。

除了安卓版的微信在其他浏览器环境没有发现类似问题。

我就是因为 Bootstrap 已经直接为 .btn 加了 -webkit-user-select: none;,在按钮后面我随手敲了几个数字占位,才遇到了这么奇葩的事情。

2017-08-22 13:29:51
Ctrl + 回车 直接提交
姜辰
开发人员~膜拜
08月23日 回复
Bary
没搞过微信,如果用 user-select: none; 覆盖能不能避开?
08月23日 回复
孙老四
回复 Bary:user-select 这个css属性目前必须加前缀才有效。至于文中这个Bug,就是建议在微信环境下尽量不用这个属性,已经用了的话,可以用 -webkit-user-select: initial; 来恢复初始。
08月23日 回复
纬八路随笔
前几天微信出了问题,是不是你干的?
08月23日 回复
孙老四
回复 纬八路随笔:有心无力,有心无力。
08月23日 回复
游客工匠盒子
那就是qq浏览器嘛,微信内置的qq浏览器
08月22日 回复
孙老四
回复 工匠盒子:多谢提醒。微信用的QQ浏览器的X5内核,但是这个问题在QQ浏览中是没有的,只在微信中出现。
08月23日 回复