semi-design
semi-design copied to clipboard
DouyinFE
[BUG] Safari 浏览器下，Select 组件下拉框闪烁
Is there an existing issue for this?
- [X] I have searched the existing issues
Which Component
Select
Semi Version
2.38.2
Current Behavior
Safari 浏览器下，Select 组件的下拉框某些情况下会闪烁:
https://github.com/DouyinFE/semi-design/assets/4783781/fdd4dd63-d3d0-40f4-8d72-5924ad7daf2b
Expected Behavior
No response
Steps To Reproduce
- 使用 Safari 打开 http://semi.design/zh-CN/input/select
- 逐个点击页面中的 Select 演示组件，偶尔能复现闪烁
ReproducibleCode
No response
Environment
- OS: MacOS
- browser: Safari
Anything else?
No response
@DaiQiangReal 实测了一下，v >2.37.1 在 safari下有会问题，跟这个PR https://github.com/DouyinFE/semi-design/pull/1676 可能相关
@DaiQiangReal 实测了一下，v >2.37.1 在 safari下有会问题，跟这个PR #1676 可能相关
我的 safari v15.1
@nekocode 你是 ARM 的 mac 还是 Intel 的？ ARM 的 Safari 16.5.1 复现了，但 intel 没有。。
@DaiQiangReal 我的 Mac 是 ARM 的。目前我们这边测试人员反馈这个问题主要是影响到 iOS 端的用户，因为 iOS 下只能使用 Safari 的 Webkit 内核
@pointhalo @DaiQiangReal
我这边最近有空排查了下，发现 Select 在初始化的时候会触发一次 rePositionDropdown:
https://github.com/DouyinFE/semi-design/blob/6f3b0957a0fbd5b5cf5a2187782bac2f767162b3/packages/semi-foundation/select/foundation.ts#L131
最终会导致 Tooltip 的 isPositionUpdated 被置为 true:
https://github.com/DouyinFE/semi-design/blob/6f3b0957a0fbd5b5cf5a2187782bac2f767162b3/packages/semi-ui/tooltip/index.tsx#L318
这个值应该是用来标志是否计算 & 更新完成位置的。一开始就为 true 会在位置还是 -9999 时把 motion 给打开，然后在 safari 下貌似就会导致闪烁了。
第二次打开下拉菜单时就正常了:
感觉应该在 insertPortal 时把 isPositionUpdated 重置为 false？我提交了 #1961 ，你们可以帮忙看下是否会有其他问题（我本地在 story 下测试不闪烁了
这个PR没有处理是因为我本地没有办法复现，在更新版本的 safari（v17.0）里没有再复现这个问题。我手上没有更旧版本的设备了，我也没有办法验证这个改动。 同时我们不倾向于改 Tooltip，这个补丁打在tooltip上是不合理的，它的影响范围会有点不可控。
我单独改了一下 Select init时 collectionOptions -> rePositionDropdown 的逻辑，在init时不做调用，但是我没办法验证，先单独发一个 alpha包给你们测试吧。
你们可以尝试使用这个版本，看看表现是否有所不同（在没有确认有效之前，这个修改仅会在该alpha测试版存在，不会合入主分支版本中）
@douyinfe/[email protected]
我单独改了一下 Select init时 collectionOptions -> rePositionDropdown 的逻辑，在init时不做调用，但是我没办法验证，先单独发一个 alpha包给你们测试吧。
你们可以尝试使用这个版本，看看表现是否有所不同（在没有确认有效之前，这个修改仅会在该alpha测试版存在，不会合入主分支版本中）
@douyinfe/[email protected]
@pointhalo 2.59.0-alpha.0 我这测试是没问题了 🎉 能在 insertPortal 之前保证 isPositionUpdated 不是 true 应该就没问题。
你那没法复现应该是因为你用的不是 ARM 芯片（这确实很奇怪），我这 Safari 17.4.1 在你们官网上测试还是会有这个问题。