Tabs 在缩放 110% 时发生闪烁

[dancerphil]

Reproduction link

Steps to reproduce

用 Chrome/Safari 打开此 sandbox，调整缩放，放大至 110%，Tabs 会发生闪烁

2024-01-10.19.37.52.mov

What is expected?

无闪烁

What is actually happening?

闪烁

Environment	Info
antd	5.12.8 5.20.1
React	react@18
System	macOS 11.7(M1)
Browser	Chrome 120

[github-actions]

Hello @dancerphil. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @dancerphil，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

[afc163]

稳定重现，眼已花。

[yyz945947732]

#46198

[dancerphil]

看起来是在 react-component/tabs#676 之后发生的问题，时间上也符合，所以可能是没修干净。

代码确实没看懂，我重新排查了一下，reset.css 最关键的是一个 button { line-height: inherit; }，没了这个 bug 也不会出现。已经更新到 sandbox，希望能有帮助吧。。。

眼已花。。注意保护眼睛。。 #46198 的那个重现比较不费眼，可以用那个。。

[zombieJ]

缩放后，在 js 获取的尺寸会有精度损失。只能通过各种取整来做兜底，的确没啥最好的办法。

[HaceraI]

试了下sandbox的最新代码，缩放到某些范围(125, 75)还是会发生问题. 1920的屏。

[hal9112508]

如果不需要展示...操作按钮的话可以把它隐藏掉就不会删了
.ant-tabs-nav-operations{
display: none;
}

[CelineYounes]

Updates?

[hyx0217]

react-component/tabs#667 当时提了pr，用getBoundingClientRect 处理缩放的情况下很麻烦，后续又改了下 useVisibleRange.ts 计算边界值的逻辑， 感觉这样可能会更好处理点。

[fine-wang]

tabs 设置TabPosition 为left,不设置高度调整缩放布局在90-175%会一直无限闪现, 可在官网组件tabs中 滑动模块 demo中调整复现.稳定复现

[fine-wang]

Tabs.-.Ant.Design.-.Google.Chrome.2024-09-13.17-49-52.mp4