增长与客服团队仍大量交付「一次构建、长期缓存」的静态页：意见反馈、事故描述、合作伙伴问卷都离不开 textarea。固定高度会裁切长文，用户看不到完整草稿；完全放开高度又会顶走主按钮与粘性页脚。过去常用几十行 JavaScript 监听 input、读取 scrollHeight，还要与 Safari 的字体度量、输入法合成路径搏斗。field-sizing: content 把「随内容增高」下沉到引擎，保留原生 IME、拼写检查与无障碍 API。本文面向 Eleventy、Hugo、Astro 等静态产物，说明如何与 Popover 提示层协同，并解释为何 Safari/WebKit 真机仍是签字硬门槛。
你将带走：能力矩阵、可引用的最小/最大高度区间、@supports 渐进增强写法、无障碍与实时提示节流策略，以及如何把验收拆到可租用的 Mac mini。
为何高度仍是体验雷区
营销表单常见区间：首屏反馈框高度 96～320 px，桌面法律声明较多时可放宽到 480 px；再高就会把「提交」挤出视口。完全依赖脚本时，RTL、可变字体与 macOS 动态字体 会让 scrollHeight 抖动，QA 常误报为「CSS 坏了」。
把增高交给引擎后，静态生成器只需输出一份 partial：同一 DOM 在 CMS 预览与生产一致，减少「在我笔记本上能跑」的漂移。
根据公开组件库在 2026 年初的流量样本，仍有约 6～9% 会话落在不支持 field-sizing 的浏览器上，需要滚动条或略高的 min-height 作为底线。
设计令牌应包含 --textarea-min-block 与 --textarea-max-block，避免品牌焕新时悄悄撑破栅格。
与 popover 提示并用时，注意不要在每次按键时重算锚点，必要时把重排节流到一个动画帧。
写法与护栏
textarea.feedback {
min-height: 120px;
max-height: 360px;
overflow-y: auto;
field-sizing: content;
width: 100%;
line-height: 1.5;
}
@supports not (field-sizing: content) {
textarea.feedback { min-height: 160px; }
}务必同时使用 max-height 与 overflow-y:auto；否则长粘贴会盖住导航。单行输入若引擎支持关键字，优先用 max-inline-size 取代随意 cols，以便 RTL 对称。
配合逻辑属性（padding-inline、border-block）让中日韩与拉丁文共用一套规则。
静态 CSS 会长期缓存，请把 @supports 与字段样式放在同一 chunk，避免懒加载造成一帧跳动。
市场热修若写内联样式，禁止对同一选择器加 height:100px!important，它会同时破坏原生增高与最大高度护栏。
2026 年浏览器矩阵
| 引擎 | field-sizing: content | 静态验收要点 |
|---|---|---|
| Chromium 123+ | textarea/input 支持 | 检查打印样式与 PDF 导出。 |
| Firefox 136+ | 支持 | 注意 max-height 与内容高度相等时的双滚动条。 |
| Safari 17.4+ | 支持（以发行说明为准） | 每次小版本复测输入法与动态字体。 |
| 旧 WebKit | 不支持 | 保留 min-height+滚动；必要时极小降级脚本。 |
Safari 真机与云 Mac mini
Playwright WebKit 能抓解析错误，但难以捕捉「合成器一帧闪白」与 CJK 输入法合成时的滚动跳动。建议每个发布周期为 Safari 预留 20～35 分钟：稳定版对外签字，Safari Technology Preview 做回归。
若固定资产审批慢，可短期租用云 Mac mini：MacHTML Apple 芯片机型常见日价约 $16.9，SSH 推送静态产物、VNC 录屏举证。
预览环境请对齐生产的 font-feature-settings、Web 字体 URL 与 color-scheme；缺字重会改变换行，从而让高度策略失真。
用 120 fps 慢动作录屏记录争议帧，比口头争论更有效。
运维侧应把 CDN 缓存键与包含 field-sizing 的 CSS 哈希绑定，避免 HTML/CSS 缓存不同步被误报为 WebKit 漂移。
无障碍与校验
高度变化不得困住键盘焦点；错误出现时把焦点移到摘要并同步 aria-invalid。字符计数若走 aria-live，请把播报节流到 300 ms 以上，避免快速输入时刷屏。
不要把关键说明只放在 placeholder：增高后占位符更快消失，认知负担反而上升。
德语复合词与芬兰语双写元音会显著改变换行，请用真实业务句子而不是 Lorem 做样本。
安全侧：CSS 不是边界；长粘贴仍需服务端长度校验。
暗色半透明面板上仍要验证焦点环对比度，避免「看得见字、看不见焦点」。
性能与布局稳定
每次增高都会触发布局：父级若 height:auto，请用网格 align-items:start 防止兄弟卡片被被动拉伸。无风扇 Mac mini 同时跑 Safari 验收与截图 CI 时，同一视口内并发的自适应字段建议不超过 两个。
不要与 height 动画同时玩花样；边框颜色可做瞬时过渡。
若营销叠加 backdrop-filter，注意与文本层合成成本；长语音输入会话下更容易暴露 GPU 压力。
把「可接受的 reflow 次数」写进 README，避免未来在同屏堆叠过多动态表单。
上线清单
在 HTML 预处理器里用 data-field-sizing="on" 做特性开关；预发通过视觉 diff 后再打开。回滚只需改属性，无需动 JS。
用 Playwright 断言输入 400 字后 clientHeight 的增长曲线；若每 100 字增高超过 40 px，多半是缺少 max-height。
把客服工单里「看不到全文」类投诉与版本号关联，目标两周内下降 12% 以上。
归档慢动作与 Lighthouse 追踪，便于性能与合规同事引用同一会话 ID。
常见问题
field-sizing 能替代 JS 吗？
多数静态场景可以；旧引擎保留滚动或极小脚本。
应先改哪些页面？
优先公网反馈与结账备注；内部后台可观望支持度。
QA 要留多久？
Safari 约 20～35 分钟，旁白抽测约 10 分钟。
Apple 芯片 Mac mini仍是终结 WebKit 表单争议的最快路径：原生文本栈、长时间录屏的热策略、以及 Linux 虚拟机难以复现的 macOS 辅助功能开关。MacHTML提供可租云 Mac mini，SSH/VNC 让你在真实硬件上验证 field-sizing、Popover 与粘性页脚，按项目开启与关停。