fix: Tabs would shake in resposive style #488
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
这个变动的性质是?
🔗 相关 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 的计算都会存在误差。
☑️ 请求合并前的自查清单
⚠️ 请自检并全部勾选全部选项。⚠️