MUI Base UI 对话框组件在iOS Safari中的滚动问题分析

问题现象

在iOS 18.4.x版本的Safari浏览器中，当用户使用MUI Base UI的对话框(Dialog)组件时，如果对话框内包含文本输入框(textarea)，点击输入框获取焦点时会出现一个异常现象：对话框背后的页面内容会突然滚动到顶部位置。这个滚动行为不是预期的，当关闭对话框后，页面又会恢复到原来的滚动位置。

技术背景

对话框组件通常会采用一些技术手段来防止背景页面滚动，这是为了提供更好的用户体验。常见的技术包括：

1. 在打开对话框时给body元素添加overflow: hidden样式
2. 使用JavaScript锁定页面滚动位置
3. 处理移动设备上的虚拟键盘弹出事件

在iOS Safari中，由于系统对虚拟键盘的特殊处理，这类问题尤为常见。不同版本的iOS可能会对滚动行为做出不同的调整，这导致了在18.3.x版本中工作正常的代码，在18.4.x版本中出现了问题。

问题根源

经过分析，这个问题与iOS 18.4.x对滚动行为的修改有关。在之前的版本中，MUI Base UI采用了一个工作区(workaround)方案：通过设置一个超时(timeout)并短暂禁用滚动锁定，来处理键盘滑动出现的情况。这个方案在18.3.x版本中解决了键盘相关的滚动问题，但在18.4.x版本中却导致了页面意外滚动到顶部的问题。

解决方案探索

目前发现的一个可行解决方案是移除原有的键盘滑动工作区代码。虽然这会导致在18.3.x版本中出现键盘滑动时的滚动问题重现，但在18.4.x版本中可以避免页面滚动到顶部的bug。

开发者需要在以下两种方案中做出权衡：

1. 保留原有代码：兼容18.3.x但18.4.x会出现滚动问题
2. 移除工作区代码：解决18.4.x的问题但18.3.x会出现滚动问题

最佳实践建议

对于需要支持多版本iOS的应用，可以考虑以下方案：

1. 检测iOS版本号，对不同版本应用不同的滚动处理逻辑
2. 考虑使用更现代的滚动锁定技术，如CSS的overscroll-behavior属性
3. 在对话框打开时，记录当前滚动位置，并在检测到意外滚动时恢复位置

总结

iOS系统版本更新经常会带来这类兼容性问题，特别是涉及到滚动行为和键盘交互的场景。作为UI组件开发者，需要持续关注各版本的行为变化，并准备好灵活的应对策略。对于使用MUI Base UI的开发者来说，目前可以暂时移除键盘滑动的工作区代码，或者等待官方发布针对新iOS版本的修复方案。