Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Tabs would shake in resposive style #488

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

anxLiang
Copy link

@anxLiang anxLiang commented Mar 17, 2022

这个变动的性质是?

  • 新特性提交
  • 日常 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 的计算都会存在误差。

☑️ 请求合并前的自查清单
⚠️ 请自检并全部勾选全部选项。⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

@vercel
Copy link

vercel bot commented Mar 17, 2022

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

@anxLiang
Copy link
Author

anxLiang commented Mar 17, 2022 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant