Safari 扩展 Popup 中的滚动迟缓问题
内容提要
Safari扩展的popup窗口滚动迟缓，源于其根据内容自动调整高度，导致频繁渲染。作者通过固定popup宽高并内部滚动解决，同时修复了白屏、暗色模式失效和滚动位置异常等问题。已向Apple提交报告，并分享至社区仓库。
延伸解读
根因：Safari popup 的自动 resize 机制
文章指出，Safari 扩展 popup 的滚动迟缓源于其根据内容高度自动调整窗口大小的机制。当内容较多时，频繁的 resize 导致渲染性能下降，进而引发滚动卡顿、白屏、暗色模式失效和滚动位置异常等问题。这一机制在 Chrome 和 Firefox 中表现正常，但在 Safari 中仍存在边缘错误。
解决方案：固定宽高并内部滚动
作者通过固定 popup 的宽度和高度（如 672px × 600px），并设置 overflow-y: auto 实现内部滚动，一举解决了所有四个问题。这一方法避免了内容变化触发窗口 resize，从而减少了渲染负担。代码中通过环境变量判断是否为 Safari，仅在该浏览器下应用此样式，确保不影响其他浏览器。
社区反馈与官方支持现状
作者查阅官方文档仅找到一条相关描述，且 WebKit Bug 和 Apple Developer Forums 上的报告均未直接关联到自动 resize 机制。因此，作者将调试过程整理成报告提交给 Apple（FB24198765），并镜像发布到社区仓库 lapcat/SafariExtensions，以公开备份和收集更多反馈。这反映出 Safari 扩展的某些问题可能缺乏官方文档支持，社区互助显得尤为重要。
Q&A
Safari扩展的popup窗口滚动迟缓是什么原因造成的？
Safari扩展的popup窗口滚动迟缓是因为popup原生窗口会根据内容高度自动调整大小，导致频繁渲染，从而引发滚动性能问题。
如何解决Safari扩展popup滚动迟缓的问题？
解决方法是通过固定popup的宽度和高度，并在内部使用滚动。具体代码为：在Safari环境下，给html元素添加类名'safari-fixed-popup'，并设置width: 672px; height: 600px; overflow-x: hidden; overflow-y: auto;。
Safari扩展popup除了滚动迟缓，还伴随哪些问题？
还伴随以下问题：切换页面时出现白屏或半黑半白、prefers-color-scheme探测不到导致暗色模式失效、路由切换后滚动位置不归零、滚动没有弹簧效果。
作者尝试了哪些方法来解决popup滚动问题？
作者尝试了去掉嵌套滚动容器改用文档级滚动、内联关键CSS抢跑加载、使用TanStack Router的scrollRestoration配置，但都未解决问题，最后通过固定body宽高并在内部滚动解决了。
Safari官方文档对popup滚动问题有何说明？
Safari官方文档（WebKit Blog - Safari 26.2更新日志）提到“extension popups could open scrolled down and some websites could flicker during scrolling”，但未明确关联到自动resize机制。
作者向Apple提交了反馈报告，报告编号是什么？
作者向Apple提交了反馈报告，编号为FB24198765，并镜像发布到了lapcat/SafariExtensions仓库。
