# 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 不支持 `` 这种复合标签的解析,可 `const Item = this.Item` 处理 * 对象赋值的顺序不同,会造成 `stringify` 的结果不同 * React 的 `<>{content}` 会删掉 `\r` 换行,在 `renderToString` 时不会删掉,需规避 * `react-color` 插件在 iframe 中 `click-outside` 交互会报错,在使用其他插件时也需注意此场景 * 腾讯云图片资源压缩,若压缩后尺寸小于 `1px` 会压缩失败,[案例](https://image-1304214004.file.myqcloud.com/88166299-d694-4d34-ad3a-501424df511d06839243223985665.png?imageMogr2/thumbnail/!60p),[文档](https://cloud.tencent.com/document/product/460/36540) * 当子级高度大于父级固定高度时,父级弹性容器会考虑换行,[案例](https://codepen.io/foreverZ133/pen/zYZQpgx) ----- * `mouseout` 绑在父级,进出子级也会触发,有点难用 * `translate(50px)` 相当于 `translate(50px, 0)`,而 `scale(1.5)` 相当于 `scale(1.5, 1.5)`,需区分 * `antd-mobile` 的 `Slider` 组件,当值范围很大时,滑杆的点击极容易触发滑动,不甚推荐这样的交互 * 在 `mounted` 周期中依旧可能 `query` 不到元素,还是在 `ref` 周期中保险一些 * 正则 `/^[23-69]$/` 实则是匹配 `2` `3-6` `9`,所以 `.test('50')` 为 `false` * cocos 的两个元素碰撞,触发 `onCollisionEnter` 的先后顺序为节点顺序,拖谁撞谁需自行处理 * cocos 中,`zIndex` 会使其在 `cc.Layout` 布局中渲染排序改变 * 部分浏览器不支持 `opacity` 为百分比值 `5%`,最好转为小数 `0.5` * CocosCreator 英文版时没有腾讯云的服务项 (版本 2.4.3),需切为中文版 * jquery 中 `html('

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}` ----- * 在部分版本浏览器中,某些元素如 `` `
` `