Grocy项目中Firefox 121版本模态对话框显示异常的解决方案

问题背景

近期在Grocy项目中发现，当用户使用Firefox 121及以上版本浏览器时，系统内的模态对话框(如"创建购物清单项"、"采购"等)会出现显示异常。主要表现为对话框内容区域空白或尺寸异常缩小，影响用户正常操作。

问题分析

经过技术团队深入调查，发现该问题与Firefox 121版本引入的HTML相关变更有关。具体表现为：

1. 问题仅在Firefox 121+版本出现，Edge/Chrome等浏览器不受影响
2. 问题具有间歇性特征，并非每次都能复现
3. 通过浏览器缩放操作(Ctrl+/-)可临时恢复正常显示
4. 问题涉及多个使用iframe模态对话框的页面

技术原理

Firefox 121版本对HTML渲染引擎进行了优化调整，这导致某些情况下iframe内容的尺寸计算出现异常。特别是在动态加载内容的模态对话框中，浏览器可能无法正确计算和分配iframe的显示区域。

解决方案

Grocy开发团队针对此问题进行了多轮优化：

1. 首先调整了模态对话框的基础JavaScript逻辑，确保在Firefox 121环境下能正确初始化
2. 针对购物清单页面等特定场景进行了专项修复
3. 进一步优化了事件时序处理，确保对话框内容加载与尺寸计算的同步性

实施建议

对于遇到此问题的用户，建议：

1. 更新至包含修复代码的最新版本Grocy
2. 确保清除浏览器缓存和服务器端视图缓存
3. 必要时重启PHP服务或服务器
4. 如问题仍存在，可尝试临时使用其他浏览器

总结

浏览器引擎更新有时会带来意料之外的兼容性问题。Grocy团队通过快速响应和深入分析，有效解决了Firefox 121版本导致的模态对话框显示异常，体现了项目对用户体验的高度重视。建议用户保持系统更新，以获得最佳使用体验。