fix: Tabs would shake in resposive style
这个变动的性质是?
- [ ] 新特性提交
- [x] 日常 bug 修复
- [ ] 站点、文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] TypeScript 定义更新
- [ ] 包体积优化
- [ ] 性能优化
- [ ] 功能增强
- [ ] 国际化改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他改动(是关于什么的改动?)
🔗 相关 Issue 💡 需求背景和解决方案
http://normal-kv6frj0e-e0472cf3.app-dev.alipay.net/a87c6?npmDebug=%7B%22%40alipay%2Fofc-website-comps-yfd%22%3A%7B%22version%22%3A%22%22%7D%7D
当为 tab 设置 flex 响应式布局时,在特定宽度下,tabs 会和 dropdown 抢占位置导致抖动现象。 原因在于采用 dom.offsetXXX 来计算 tab 的宽度是不准确的。 dom.offsetXXX 为四舍五入取整值,在响应式布局下会丢失精度,导致在计算的时候产生误差,最大误差为 0.5 * n。
具体错误代码: src/hooks/useVisibleRange.ts 46
if (offset[position] + offset[unit] > transformSize + mergedBasicSize)
实际上很多利用 offsetXXX 的计算都会存在误差。
☑️ 请求合并前的自查清单 ⚠️ 请自检并全部勾选全部选项。⚠️
- [x] 文档已补充或无须补充
- [x] 代码演示已提供或无须提供
- [x] TypeScript 定义已补充或无须补充
- [x] Changelog 已提供或无须提供
This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.
🔍 Inspect: https://vercel.com/react-component/tabs/5TrTnmCRjoz131HUfFyDzY8t9Xpq
✅ Preview: https://tabs-git-fork-anxliang-fix-tab-shake-react-component.vercel.app
您的来件我已收到,我会尽快处理。