这一年遇到的奇怪bug
position sticky 失效
在 Iphone6 plus 上使用 position sticky 不生效
解决办法：
position: sticky;
position: -webkit-sticky; // 兼容写法需要写在下面
参考 position sticky 失效 – 有点另类的写法
new Date().toLocaleDateString() 获取当前的日期字符串无效
当系统语言是新加坡英语的时候，使用这个方法获取当前的日期字符串会出现 Invalid Date，toLocaleDateString 是有两个参数的，不指定语言就会出现这个问题，而且只在手机上出现，不太好排查，
new Date().toLocaleDateString('en-Us')调用的时候指定语言就没问题了；
参考 Date.prototype.toLocaleDateString()
两行溢出显示省略号但是部分手机上出现第三行截断痕迹
例如设置了高度为36px，line-height 18px，但是出现了第三行截断痕迹，应该是文字 baseline 的对其方式问题，试着设置 vertical-align 也不行。解决办法就是不给文字的盒子设置高度，如果一定要个高度兜底，可以在文字的盒子再套一个盒子，在套的那个盒子设置高度。
泰文字体文本溢出隐藏，但是第二行出现截断痕迹
原因，应该是泰语的字体行高要求比较高，暂时的解决办法：加高文本行高
useEffect 首次获取 dom 的 clientHeight 不对
初步感觉是因为 css 样式加载慢了，导致第一次获取到的高度是没有样式的高度，而且又是偶现的；所以在这个组件或者 hooks 重新 render 的时候去获取高度，如果获取到最新的高度发生变化，去同步修改 state 保存的高度。
import { useEffect, useState } from "react";
export default function useTop(){
const [top, setTop]=useState(0);
const [bodyHeight, setBodyHeight] = useState(document.body.clientHeight);
const newestTop = (document.getElementById('nav-header')?.clientHeight || 0) - 1;
if (newestTop !== top) { // nav header height may change
setTop(newestTop);
setBodyHeight(document.body.clientHeight - (newestTop + 1));
}
useEffect(() => {
const nav = document.getElementById('nav-header');
const navHeight = nav?.clientHeight ?? 0;
setTop(navHeight-1);
setBodyHeight(document.body.clientHeight - navHeight);
}, []);
return {top, bodyHeight}
}
一个页面中有两个滚动条，两个滚动条几乎同时触发滚动条的滚动方法,后执行的不生效
两个滚动条，一个使用 scrollBy 方法，另一个使用 scrollIntoView 方法，behavior 属性都为 smooth，这个属性会让滚动条平滑移动，导致滚动条事件一直在触发状态，另一个滚动方法就执行不了了。解决方法：让先执行的方法 behavior 属性为 auto；或者在第一个滚动条结束之后再执行第二个滚动条的方法，可以让第二个方法 setTimeout 100ms 左右，不能超过 300ms，否则用户会感觉卡顿。
iphone6 手机上横向或者纵向滑动不了
原因，可能是dom结构问题，导致低端ios机型没有识别到生成滚动条，导致不能滚动，android 和其他 ios 机型正常；
<div className="list-tabs-wrap">
<div
className="list-tabs"
>
<div className="tab-item">tab1</div>
<div className="tab-item">tab2</div>
<div className="tab-item">tab3</div>
</div>
</div>
.list-tabs-wrap {
width: 100%;
background-color: #fff;
overflow: hidden;
}
.list-tabs {
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 50px;
background-color: #fff;
}
.list-tabs::-webkit-scrollbar {
display: none;
background-color: transparent;
color: transparent;
width: 0;
height: 0;
}
.tab-item {
width: 50vw;
}
解决办法，新增一个 container 结构，container dom 宽度为 max-content，overflow 拆开写
<div className="list-tabs-wrap">
<div
className="list-tabs"
>
<div className="list-tabs-container">
<div className="tab-item">tab1</div>
<div className="tab-item">tab2</div>
<div className="tab-item">tab3</div>
</div>
</div>
</div>
.list-tabs-container {
overflow-x: scroll; // overflow 拆开写
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
width: max-content; // 纵向设置 height
}
用上面方法解决 iPhone6 滚动条问题后，又出现一个滚动条隐藏样式不生效的问题；解决办法，设置一个外层的盒子，固定高度然后
overflow: hidden，需要滚动的盒子加一个padding-bottom: 10px，padding 大小看着改，能放下一个滚动条就可以，这样滚动条会出现在padding里，然后又因为外层盒子overflow: hidden了，所以滚动条和padding都看不到了；愿世界再无 iphone6.
在 Android webview 中，window.location.reload 和 replace 失效
const reload = () => {
const timeStamp = new Date().getTime();
const oldUrl = window.location.href;
const url = `${oldUrl}${oldUrl.includes('?') ? '&' : '?'}timeStamp=${timeStamp}`;
window.location.href = url;
};
const locationReplace = (url) => {
if(history.replaceState) {
history.replaceState(null, document.title, url);
history.go(0);
} else {
location.replace(url);
}
};
部分安卓手机把请求参数的字符串中间的空格转义成+号
发现在
谷歌 Pixel 3 XL手机上，会把请求参数的字符串中间的空格转义成+号，比如 '[{"filterField":"accommodationType","value":"Hotel,Entire apartment"}]' => '[{"filterField":"accommodationType","value":"Hotel,Entire+apartment"}]'。调试了下，发现在发起请求前参数打印是正常的，是浏览器在请求的时候在请求体中字段转义的。不过好像对后端的搜索结果并不影响，所以这里就没有改动。
解决办法，对字符串encode下，后端收到参数后再decode。
ios 17 input 聚焦页面出现抖动
解决办法： input focus 给 body 添加 height: 100vh; overflow: hidden; 样式。input blur 取消 focus 添加的样式。