# bugs
**Repository Path**: forever133_admin/bugs
## Basic Information
- **Project Name**: bugs
- **Description**: 记录一些我自己认为是BUG的坑眼
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2017-10-08
- **Last Updated**: 2025-05-27
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
大段文字看起来眼睛好累,所以我随便按每10个进行一次分割。
如果你有更好的展现形式,欢迎投稿,非常感谢!
# 记录一些坑眼
* HTML 中设置 `[dragable]` 仅图片可触发拖拽,设为 `[dragable="true"]` 才是整个元素可拖拽,[案例](https://codepen.io/foreverZ133/pen/GgKYJOO)
* TDesign 的 `t-pagination` 使用 `defaultPageSize` 搭配 `total` 并动态修改 `total` 不生效,需使用 `pageSize`
* Vue3 中 `const formData = reactive({})` 传给子组件 `v-model="formData"` 有概率打包报错,所以仅能使用 `ref`
* 当存在 `meta[http-equiv="Content-Security-Policy"]` 时 `[preload]` 属性会失效,可换用 `http header` 方式
* mac 的 `node_modules/.bin` 中是软链接,所以拷贝 `node_modules` 给 windows 用会找不到指令
* ``axios.get(`/api?n=${n}`)`` 当 `n` 带有特殊符号 `#?` 时会有错误,故采用 `axios.get('/api', { params: { n } })` 更佳
* 例如 `decodeUriComponent('%st%C3%A5le%')` 还是会报错的,特别场景可使用 `decode-uri-component` 的包
-----
* 直接访问资源然后刷新不会使用缓存,作为内链刷新才会使用缓存
* 图片拖拽不要缩略图一般用 `draggable="false"` 或 `-webkit-user-drag: none;` 处理,但其他元素拖拽区域重叠会使其无效
* 若 `dragstart` 中有 `preventDefault` 将不触发 `dragend` 和 `drop`
* `drop` 事件必须 `dragover` 中有 `preventDefault` 才可触发
* 遇到 `trim` 不掉的空格,可能是遇到了 `\u00A0` 需要 `replaceAll` 掉,[补充](https://github.com/forever-z-133/others/issues/249)
* `glob('aa/**/bb')` 不支持 windows,需改为 `glob('**/xx', { cwd: 'aa' })`
* `uni-app` 在 H5 平台 `v-for="item in 10"` 中 `item` 从 `1` 开始,其他平台从 `0` 开始,需改用 `index`
* 页面使用 `onbeforeunload` 做跳转拦截后,但普通的跳页也会拦截,故而需特殊处理,[案例](https://test.forever-z.cn/others/funny/onbeforeunload.html)
* `uni-app` 的 `class A exnteds B` 中的 `B` 在企微模式下不能为函数,比如 `Promise` 需嵌套成 `class MyPromise`
* `uni-app` 中 `:key="a+b"` 这类表达式在小程序模式下不被支持
-----
* 在开发时文件夹为 `datePicker` 但 `import 'datepicker'` 能跑通,但部署时 Linux 中无法跑通
* 当 `inline` 搭配 `font-size: 0` 时该元素宽高为 0,而 `inline-block` 还是会被子级撑起宽高,[案例](https://codepen.io/foreverZ133/pen/XWeZKOz)
* 部分苹果机小程序不支持 `scale(-1, 1)` 负值,可用 `transform(-1, 0, 0, 1, 0, 0)` 替换
* `Taro.nextTick` 有概率不触发回调,而 `wx.nextTick` 不会,推荐根据环境采用后者
* 小程序 `canvasPutImageData` 的位置尺寸必须为整数,否则会报 `invalid data format`
* 小程序 `Button` 数字是非衬线汉字是衬线,与 `View` 的表现不一致,可加 `lang='zh_CN'` 来处理
* 当父级高度小于其行高时,子级行块元素的 `vertical-align: middle` 会造成父级上方有空隙,[案例](https://codepen.io/foreverZ133/pen/QWMQLEd)
* JSX 中在 `map` 内进行判断渲染,未渲染的节点会有空 `key` 的报错,最好采用 `Fragment` 做空节点,[案例](https://codepen.io/foreverZ133/pen/QWMaNYr)
* React 的 `style` 对象顺序不同可能造成渲染结果不同,[案例](https://codesandbox.io/s/object-sort-exy2l)
* 安卓机发朋友圈时,纯色图或小图会不出现在选择列表中
-----
* 小程序重绘或 `swiper` 滑动时,父级圆角会突然遮不住子级尖角,故子级最好也都加圆角
* Taro 3.3.6 用 style 设置 `pointerEvents` 未渲染该属性,只能靠 css 文件设置了
* 小程序当 Canvas 尺寸较大 *(比如 3000x3000)* 时,部分机型会导出图片失败
* 小程序初始化较大尺寸的 Canvas 后,部分机型的交互会变得很卡顿
* Taro 不支持 ` 1
1
` ----- * js 中 `??` 属于低优先级,比如 `1 + undefined ?? 0` 会得到 `NaN`,在 dart 中也是 * `bind` 修改后无法再次修改 `this`,因此诞生了软绑定 `softBind`,[案例](https://codepen.io/foreverZ133/pen/PobwReK) * `gap/grid-gap` 中 y 轴若为百分比,会以宽度为准,且不会撑起高度 * 在省略样式处创建层叠上下文,会未被省略,但表现很奇特,[案例](https://codepen.io/foreverZ133/pen/oNzdYXZ) * 浏览器回退时接口会 `from disk cache` 使用缓存造成动态数据未更新,应该是主要依据于 `Last-Modified` * cocos 的 `cc.Graphics` 代码写的 `fillColor` 不支持半透明,但 Creator 软件的设置 `Fill Color` 倒有效 * 父级 `pointer-events: none` 但子级为 `auto`,那子级范围内认可触发父级效果,[案例](https://codepen.io/foreverZ133/pen/NWRNqVY) * `case` 若不加 `{}` 并未独立作用域,比如 `switch(1) { case 1: let a; break; case 2: let a; break; }` 会报错 * SVG 中 `polygon` 没有 `x` 等调位置,只能靠 `transform` 了 * `var x=0; var y=false; x=y?100:x++` 答案为 0,挺有趣的错误 ----- * `transition-delay` 为 `0ms` 不会触发 `transitionend` 事件,哪怕有 `0.001ms` 就会。`animation` 没这问题 * 部分浏览器 `transition: background-image 1s` 会有两图重叠渐显渐消的效果,但非常不稳定 * `flex: 1` 实则为 `flex: 1 1 0` 的缩写,应写为 ` flex: auto` 或 `flex: 75%` 更好 * flutter 的 `Positioned` 如果没有定位属性,则会与 `Container` 表现一致 * `transition` 和 `animation` 的 `0` 必须有单位,如 `0s` * `inline` 中定位然后 `right: 0` 是按最后一个字符来定的,而不是容器边界 * CSS 的 `content: attr(data-title)` 中 attr 加引号会失效 * 如下条,当想要无高度的 appBar 时 child 若用 `SizedBox.shrink()` 表现不一致 * Flutter 中想要无高度的 appBar 可用 `PreferredSize(preferredSize: Size.zero, child: Container())` * Flutter 中在无 appBar 的 body 中使用 Expanded 在顶部会有奇怪空白,[案例](https://dartpad.cn/54ed9402e0c86f0c9b8b44d6f2d48d02)(需翻墙) ----- * SVG 当 `fill="none"` 时无法触发 SMIL 的 `begin="click"`,需用 `fill="transparent"` * `let a = b = 1` 中的 `b` 其实是 `var` 的 * 给定位定高的 `body` 设置背景图,`contain` 会失效,[案例](https://codepen.io/foreverZ133/pen/gOaNdLv) * 给不定高 `body` 设 `background-size` 表现比较意外,[案例](https://codepen.io/foreverZ133/pen/JjYQadG) * 当父级 `overflow: auto`,子级绝对定位超出,父级不加 `relative` 可看到子级,[案例](https://codepen.io/foreverZ133/pen/oNjrMog) * 阻止微信浏览器字体大小 `setFontSizeCallback` 在微信上可行,在企业微信上不可行 * 组件内的 `slot` 不算父级的 `slot`,[案例](https://codesandbox.io/s/zujianneide-slot-busuanfujide-slot-u1k3h) * 子级非 `flex-shrink:0` 且父级为 `flex` 时,子级尺寸不会超出父级,[案例](https://codepen.io/foreverZ133/pen/xxwmdJE) * `'11Q'.match(/((\d)+)([A-Z])/)` 返回 `['11Q', '11', '1', 'Q']`,注意括号解析顺序与范围 * 模板字符串中 `$${price}` 和 `\${price}` 结果不同,前者返回 `$0.00` 后者返回 `${price}` ----- * 在部分版本浏览器中,某些元素如 `