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 })
}}

[gaoryrt]

iOS15 使用 border-image 的时候会出现 3px 边框

如题，想用 border-image 实现高度自适应的背景图

预期状态/真实状态

不加 border-image-source 的时候，都是正常的，加了就自动出现 3px border，很奇怪。

解决方案

因为我这个只是针对下边框进行延伸，所以把上左右方向的 border-width 设置为 0 就解决了。

[gaoryrt]

inline-block 默认的 vertical-align 是 baseline

当作题来问的时候，大家应该都知道默认（大致应该约莫）是下边对齐，但是实际出现还挺反直觉的

预期状态/真实状态

一个 container 里面三个 inline-block，第一个矮，第二个高，第三个掉在了下一行：

在保留默认值的情况下，渲染结果是这样的

解决方案

这还不简单：vertical-align: top 完事儿。

[gaoryrt]

写了 safe-area-inset-* 但是没有高度

在环境相同、css相同的情况下，前页面安全区有高度，后一个网页就没有高度了

预期状态/真实状态

css 都是一摸一样的，但是通过网页检查器看得到前一个高度 56px，后一个就是 0.

解决方案

debug 了个把小时，原来是忘了加 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"/>

[gaoryrt]

元素里超大的某个 border-radius 会影响到其他圆角的大小

在一个 border-radius 里面填多个值，当其中一个值超过最小长/宽的一半时，会影响另外值的表现

预期状态/真实状态

内容补充：border-raduis 填两个值的时候表示[左上右下]和[右上左下]，三个值的时候是[左上][右上左下][右下]，四个值的时候是[左上][右上][右下][左下]。

预期 border-radius: 25px 20px 和 border-radius: 25px 200px 的左上右下圆角应该是一样大的，但事实是，对于一个 100x50 的正方形来说，表现不同：

^ 注意看这俩的左上右下圆角大小有明显不同

解决方案

mdn 都没写这个，答案在w3上，写到

Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, UAs must proportionally reduce the used values of all border radii until none of them overlap.

圆角不得重叠：当任意两个相邻圆角半径之和超过边框的大小时，UA 必须按比例减少所有圆角半径的使用值，直到它们都不重叠。

好了，又学习了。还能咋解决，改呗。

[gaoryrt]

new Audio('xxx') 兼容性不高

某台 iOS 设备所有音频都不能播

预期状态/真实状态

以前都是

const ado = new Audio(item.src);
ado.play()

其实安卓和 chrome，甚至 ios 连上 safari devtool 在命令行里执行都能正常使用，但是到了 ios 上就播放不了了，（已经关闭了多媒体播放用户触发限制，没有低电量模式）同时也不报错。

解决方案

safari 这个怪脾气只有和它相处久了，才能猜得透：

const ado = new Audio();
ado.src = item.src;
ado.play();

这样就能跑了，
神奇！就像 Safari 一样神奇！

[gaoryrt]

react video 标签 muted 属性消失

如题

预期状态/真实状态

设置了 muted={true}，功能也正常，但就是 dom 里面没属性

解决方案

简单搜索可找到 SO 这一篇 和 fb/react 这一篇 文章。按照文中建议，使用：

const videoRef = useRef(null);
useEffect(() => {
    videoRef.current.defaultMuted = true;
})