tabs icon indicating copy to clipboard operation
tabs copied to clipboard

fix: Tabs would shake in resposive style

Open anxLiang opened this issue 3 years ago • 2 comments

这个变动的性质是?

  • [ ] 新特性提交
  • [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 已提供或无须提供

anxLiang avatar Mar 17 '22 09:03 anxLiang

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

vercel[bot] avatar Mar 17 '22 09:03 vercel[bot]

您的来件我已收到,我会尽快处理。

anxLiang avatar Mar 17 '22 09:03 anxLiang