FloatingOverlay 组件在其容器的滚动行为为"平滑"时,在 iOS 上会导致可见的滚动
作者: cdillond创建于 2026年5月16日更新于 2026年6月9日
标签NEEDS: triage
** 描述错误**
当一个文件的:root'要素的滚动-行为'设定为平缓'时,它包括一个浮动重叠'反应部分,加上锁定滚动',将浮动重叠'要素组合起来,导致视图跳到顶端,然后顺利地卷回原位置。 这不会发生在其他用户代理.
我相当肯定,问题在于: https://GitHub.com/floating-ui/floating-ui/blob/d8020ee98c702caa31fa9b4d929ca782c6b58c59/packages/react/src/组件/floatingOverlay.tsx#L68 改为:
窗口.scrollTo({上:滚动Y,左:滚动X,行为:'instant'});** 废除** CodeSandbox似乎认为我是一个机器人, 但一个合理的最小的复制机看起来像: 在名为`index.cs'的文件中, 缩略语 : root { 存档副本 卷轴行为:平滑; {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?
缓冲 { 高度:200伏; {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?
然后,在`再生产者.tsx'中
时间轴 :
导入“./index.css”
从“ 反应” 导入 { 使用状态}
从“ @ floating-ui/ react” 导入 {浮动重叠 }
导出函数 Republicer () {
c. [打开,设置打开]=使用状态(假);
Const toggle = () QQ set Open((Prev)) !prev ; (中文(简体) ).
返回( ưμ㼯A
<>
{打开 } < 浮出水面的锁 ! >
<div className='buffer'>top</div> (中文(简体) ).
在 Blur-toggle 上选择
< option > hello </ option >
< option> world </ option> (中文(简体) )
</选择>
<div className='buffer'>从下到下</div>
< /> (简体中文)
(中文(简体) ).
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?** 复制行为的步骤:** 在运行Safari的iOS设备上,
- 向下滚动到 " 选择 " 要素并打开。
- 关闭 " 选择 " 要素。
- 我这样做时,屏幕会跳到上方,然后向下平稳地滚动。 如果其他设备也遵循同样的步骤,这种情况就不会发生.
** 预期行为** 所有用户代理人的行为应相同。 删除“浮动重叠”不应导致文档滚动。
** 内容:**
- 操作系统:iOS
- 浏览器Safari
内容来源: floating-ui/floating-ui