field-sizing: content 不可用于生产环境，因仅 Chrome 123+ 支持，Firefox/Safari 不支持且静默忽略；跨平台方案需用 JS 动态设置 height=auto 后赋值 scrollHeight，并处理字体加载、键盘弹出、框架更新等细节。
别用 field-sizing: content 做高度自适应 —— 它目前只在 Chrome 123+（及基于 Chromium 的新版 Edge、Opera）中可用，Firefox 和 Safari 完全不支持，且无法 fallback 到 JS 行为；真要上线，必须降级到 JS + scrollHeight 方案。
为什么 field-sizing 不能直接用于生产环境
截至 2026 年 4 月，field-sizing 仍是 Chromium 专属实验性属性：Firefox 没实现，Safari 不识别，CanIUse 上明确标为「仅 Chromium」；更关键的是，它被浏览器静默忽略 —— 写了没效果也不会报错，容易误判为“已生效”。CSS.supports('field-sizing', 'content') 在非 Chromium 浏览器里返回 false，但很多项目漏掉检测逻辑，直接上 CSS，结果 iOS 用户看到的是塌陷的 <textarea></textarea>（高度为 0）。
真正跨平台可用的 textarea 高度自适应方案
核心是三步：重置高度 → 读取 scrollHeight → 限制最大值。必须搭配以下要点才能稳定：
- 给
<textarea></textarea>显式设置box-sizing: border-box，否则scrollHeight包含 padding/border，导致重复计算 - 监听
input事件（不是change），并在事件回调里执行：el.style.height = 'auto'; el.style.height = Math.min(el.scrollHeight, 120) + 'px';
- 避免父容器
overflow: hidden—— 它会截断内容并使scrollHeight返回错误值 - iOS Safari 中光标可能错位，加一句
el.scrollIntoView({ block: 'nearest' })可缓解
容易被忽略的移动端陷阱
键盘弹出时，iOS 视口缩放和 visualViewport 尺寸变化会让 scrollHeight 瞬间失准，尤其在输入中文拼音未上屏阶段：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖首次计算值，建议在
setTimeout(() => { /* 读 scrollHeight */ }, 0)中延迟获取 - 监听
resize事件（对应键盘收起）和visualviewport.resize（对应键盘弹出），触发二次重设 - 若使用 React/Vue，注意框架 diff 可能导致
ref更新滞后，需强制flushSync或 nextTick 后再读高
最常被跳过的其实是字体加载时机 —— Web Font 加载完成前，scrollHeight 会按 fallback 字体计算，等字体就绪后高度突变。真实项目里，得等 document.fonts.load() 完成后再初始化自适应逻辑。
