Flutter Web应用在MacOS Safari中UI异常随机变化问题求助

我开发的Flutter Web应用在MacOS Chrome中运行完全正常，但在安装了最新补丁的MacOS Safari里，UI会随机出现异常变化。我知道MacOS Safari是Flutter的一等支持平台，想请教可能的原因。

异常表现示例 #

• 组件本该显示为Chrome中的正常样式，实际在Safari中呈现异常样式
• 鼠标移至第二个按钮时，文本从Urlau变为...
• Urlau字符串原本出现在应用中完全无关的位置，却错误显示在按钮上

编译命令：flutter build web --web-renderer html

对比截图 #

Safari异常显示效果

Chrome正常显示效果

可能的排查方向 #

• 切换渲染器测试
  当前使用的html渲染器依赖浏览器原生DOM渲染，Safari与Chrome的DOM实现存在差异。尝试用canvaskit渲染器重新编译：flutter build web --web-renderer canvaskit，它基于Skia引擎，跨浏览器一致性更强，能规避大部分浏览器原生渲染的差异问题（代价是初始包体积略大）。

• 检查组件Key的使用
  Flutter的HTML渲染器会复用DOM节点，如果动态组件（比如列表项、可复用的按钮）没有设置唯一的Key，可能导致节点复用错误，出现内容串位（比如无关的Urlau文本出现在按钮上）。确保所有需要复用的组件都绑定了唯一标识的Key。

• 排查文本溢出逻辑
  按钮文本变成...可能是Safari对文本溢出的处理逻辑和Chrome不一致。检查按钮容器的约束是否合理，是否显式设置了TextOverflow.ellipsis，尝试固定容器宽度或调整softWrap属性，看是否能解决文本异常截断的问题。

• 升级Flutter到最新稳定版
  部分Safari特有的渲染bug可能已经在新版本中修复。查看当前Flutter版本，升级到最新稳定版后重新编译测试，确认是否解决问题。

• 用Safari开发者工具分析样式差异
  打开Safari的开发者工具，查看异常元素的CSS样式，对比Chrome下的样式差异。重点关注transform、position、overflow等属性，看是否存在Safari不支持或解析不同的CSS规则，针对性调整Widget的布局参数。

内容的提问来源于stack exchange，提问作者SteAp