Dropdown等悬浮组件在缩小窗口尺寸后可能会导致溢出，使窗口出现滚动条

[lenyige]

描述错误

触发Dropdown并关闭后，class为v-binder-follower-content的节点仍存在于body中，其中transform属性在悬浮组件不显示时不会变化，在缩小窗口尺寸后可能会导致父节点溢出：

• 当宽度小于translateX时，窗口会出现横向滚动条;
• 当高度小于translateY时，窗口会出现纵向滚动条。

组件位于窗口右侧或底部时最容易出现，再次触发Dropdown可恢复正常。

Select、Time Picker、Tooltip、Popover等相同实现方式的悬浮组件都存在该问题。
若悬浮组件在缩小窗口尺寸时仍在显示，由于transfrom属性会持续更新就没有问题。

该情况仅出现在以下浏览器状态时：

1. Chrome/Edge：当缩放不等于100%时会出现，100%时仅会在第二次触发Dropdown时短暂出现；
2. Firefox：任何缩放比例都会出现。

临时解决方案：
对于不需要body上有滚动条的网页，可给body添加overflow: hidden;属性解决，和官网相同。

复现步骤

调整Chrome/Edge缩放不是100%，或使用Firefox浏览器

横向滚动条：

1. 把Dropdown组件置于网页右侧
2. 触发Dropdown，然后移走光标使其自动隐藏
3. 缩小窗口宽度，会出现横向滚动条
4. 再次触发Dropdwon，恢复正常

纵向滚动条：

1. 把Dropdown组件置于网页底部
2. 触发Dropdown，然后移走光标使其自动隐藏
3. 缩小窗口高度，会出现纵向滚动条
4. 再次触发Dropdown，恢复正常

多个Dropdown会导致该问题叠加。

最小复现链接

https://codesandbox.io/p/sandbox/naive-ui-dropdown-overflow-bug-3wc3zs

系统信息

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-4910MQ CPU @ 2.90GHz
    Memory: 15.42 GB / 31.67 GB
  Binaries:
    Node: 18.14.2 - D:\ProgramFiles\x64\nodejs\node.EXE   
    Yarn: 1.22.19 - D:\ProgramFiles\x64\nodejs\yarn.CMD   
    npm: 9.5.0 - D:\ProgramFiles\x64\nodejs\npm.CMD       
    pnpm: 9.3.0 - D:\ProgramFiles\x64\nodejs\pnpm.CMD     
  npmPackages:
    naive-ui: ^2.41.0 => 2.41.0 
    vue: ^3.4.29 => 3.4.29

使用的包管理器

pnpm

验证

• 阅读 贡献指南。
• 阅读 文档。
• 检查是否已经存在相同问题的问题，以避免创建重复的问题。
• 确保这是一个具体的 bug。有关问题和答案，请打开 GitHub 讨论。
• 提供的复现是最小可复现的示例。