true facts

[gaoryrt]

收集一些莫名其妙的问题

格式如下：

## 简述
> 具体发生环境/步骤
### 预期状态/真实状态
本来应该... 但是它...
### 解决方案
替换了用了... 得以绕过

[gaoryrt]

vivo / oppo 不支持 Array.prototype.includes()

vivo X7Plus, Funtouch OS_2.5.1, android 5.1.1, Android System WebView 39

预期状态/真实状态

按照 MDN 文档，应该是所有安卓都支持。
按照 caniuse 查表，也应该是 4.4.4 以上都支持才对。
然而真机表示不同意

解决方案

这个简单，arr.includes(i) 换成了 arr.indexOf(i) > -1

[gaoryrt]

id 选择器的限制比 class 宽松多了

html5 比上一个版本宽松了许多
The id global attribute is now allowed to have any value, as long as it is unique, is not the empty string, and does not contain space characters.

预期状态/真实状态

之前一直以为 id 选择器和 class 选择器一样，必须用 letter 开头
然而，只要是没有空格、文档内唯一就行
What are valid values for the id attribute in HTML? - stackoverflow
id - MDN

解决方案

了解就行，规则放宽了

[gaoryrt]

iOS WKWebview 超出一屏无法响应点击

多个版本的 iOS 都有这个问题：stackoverflow 上的类似讨论

预期状态/真实状态

超出一屏外的部分有个按钮，点一下应该有事件的，然而超出 contentInset 的话就没了

解决方案

等 iOS 12 或者重新设计按钮位置

[gaoryrt]

contenteditable 首字母 bug

相关讨论： slab/quill#1453
surmon-china/vue-quill-editor#56

预期状态/真实状态

预期是 input 一样的输入框。
但真实情况是，使用 CJK 输入法 / IME 时输入的首字母会遗留在输入框里。
我怀疑和我全局监听的 key-down 有关。

解决方案

中文输入截断问题
通过 compositionstart 和 end 设置标志位来判断是否处于 IME 状态，从而触发 input

[gaoryrt]

iOS10 不支持直接设置 el.style = ''

h5 里面先 el.style.transform = 'xx', 之后想用 el.style = '' 来重制状态，报错说 attempted to assign to readonly property

预期状态/真实状态

iOS10 以上的机器以及安卓没有这个问题，都可以用 el.style = '' 来将 attribute 里面的 style 置为空。
但是 iOS10 不行。

解决方案

所以就还是不要偷懒：

el.style.transform = `translateY(-${Y}px)`
el.style.webkitTransform = `translateY(-${Y}px)`
el.style.transform = ''
el.style.webkitTransform = ''

[gaoryrt]

安卓 touchend 记住要在之前 preventDefault

miui 10.2 安卓 9.0 上出现了一个 安卓 4.4 之前才有的 bug

预期状态/真实状态

这个貌似和 4.4 的那个 touchmove 只触发一次 bug 是同一个原因
浏览器接管了 touchmove 事件，导致第一次之外的所有 touchmove 和 touchend 都失效了

解决方案

touchmove 的时候 preventDefault 就解决

[gaoryrt]

荣耀P10 + minicss extract plugin 样式出错

emui 8.0, android 8.0, 不支持 margin: 1px 0 calc(env(safe-area-inset-top) + 1px)

预期状态/真实状态

本来是在代码里写：

.a {
	margin: 1px 0;
	margin-bottom: calc(constant(safe-area-inset-top) + 1px);
    margin-bottom: calc(env(safe-area-inset-top) + 1px);
}

用来兼容安全区，然后 minicss 压缩就变成了

.a {
	margin: 1px 0 calc(env(safe-area-inset-top) + 1px)
}

这里有俩问题，第一是手机系统不支持 safe-area，第二个是 minicss extract plugin 没有考虑降级，直接给css压缩了了。

解决方案

正确方案是用 @supports (margin: calc(env(safe-area-inset-top) + 1px))
css 改样式方法就太多了

[gaoryrt]

iOS 10.2 及以下，http 请求命中的缓存会带上老的 allow-origin，导致新的 304 不合法

页面A和B，不同 referer，请求同一个 api。A返回被缓存，access-control-allow-origin=A。当B请求时命中缓存，返回 304，但这时 access-control-allow-origin=A，不匹配，浏览器不给前端数据。

预期状态/真实状态

从前端开发人员的角度想，referer 不一样的时候应该不命中缓存，重新发请求才对。从浏览器来想他这么做也合理，上次请求都是 A，这次怎么就变成 B 了呢。

解决方案

升级 10.3 或以上/加上 timestamp 避免命中缓存/后端把可能的 origin 都加上/保证发送的 origin 都一样

[gaoryrt]

微信的 alert 会卡，模态框消失后一段时间内操作失效

微信 7.0.3，只要 alert 的确定点得够快，那么后面一段时间内的点击操作必定不会被触发

预期状态/真实状态

测试代码如下：

进入页面就狂点，记录 alert 和点击事件的时间关系
结果 safari 和微信浏览器显示在数值上都差不多，所以其实就是微信的 alert 会卡。。。

解决方案

修改产品，把模态框改成 toast 了。。。

[gaoryrt]

Mock.js 下载文件有问题

使用 Mock.js，然后用 xmlHttpRequest / axios 请求 arraybuffer，用 createObjectURL 保存文件，文件大小不对

预期状态/真实状态

本来应该是14k的文件下载完有26k，下载的文件变大了，而且打印二进制貌似格式没啥问题。

解决方案

使用 fetch 就可以成功下载，调试了半天原来是 Mock.js 的锅，禁用调 mock 就能成功下载了。

[gaoryrt]

第二次 RegExp.test 不符合预期

使用正则 .test 方法，单独使用的时候没问题，多次调用就不对了

预期状态/真实状态

const spaceReg = / /g;

const fn = (str) => spaceReg.test(str);

console.log(fn(" ")); // 预期是 true，结果是 true
console.log(fn(" ")); // 预期是 true，结果是 false

显然 log 在单独执行的时候都是 true

解决方案

exec 和 test 在 g 或者 y flag 的时候都是有状态的，去掉这个 flag 或者改用 match 就符合预期了。

[gaoryrt]

ios 11 惯性滚动失效

一个简单的 container，overflow: auto，手指在哪里离开，内容就在哪里停止

预期状态/真实状态

手指离开之后应该有惯性滚动才对吧

解决方案

container 上加这一行就可以了：
-webkit-overflow-scrolling: touch
谢谢你，Safari!

[gaoryrt]

安卓页面莫名其妙触发 onClick

用户在从后台重新唤起页面的时候，页面内的特定按钮会触发 onClick，即使用户没有点击

预期状态/真实状态

唤起应该触发 visibilitychange，没有点击不会触发 onClick

解决方案

原来是用户安装的李跳跳检测到了按钮上的「跳过」按钮进行了点击
换文案也可以，告诉用户也可以

[flamintune]

读取 xlxs 文件另存的 UTF-8 编码的 csv 文件出现中文乱码

chrome

预期状态/真实状态

按理说UTF-8不会出现中文乱码，但是出现了中文乱码

解决方案

将UTF-8编码前面加上三个字节0xEF, 0xBB, 0xBF，让其成为UTF-8 with BOM就能解决了

[gaoryrt]

iOS15 页面长按出现了一个小小的气泡/放大镜

iOS15.0 iPhone13mini react17 页面内长按就会出现

预期状态/真实状态

和这个和这个描述的一样。
尝试过css的方式无果，又尝试了在 onTouchStart 里面直接 e.preventDefault() 也不行。
然后试了试 document.body.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false }); 可以倒是可以，问题是页面内长按事件又都失效了（那不然呢）。

解决方案

ref={el => {
    el?.addEventListener('touchstart', e => e.preventDefault(), { passive: false })
}}