行銷與客服仍大量交付「一次建置、長期快取」的靜態頁：意見回饋、事故描述、合作夥伴問卷都仰賴 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：CMS 預覽與生產共用 DOM，降低環境漂移。
根據公開元件庫在 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 分鐘，VoiceOver 約 10 分鐘。
Apple 晶片 Mac mini仍是終結 WebKit 表單爭議的最短路徑：原生文字堆疊、長時間錄影的熱策略，以及 Linux 虛擬機難以複製的 macOS 輔助使用開關。MacHTML提供可租雲端 Mac mini，SSH/VNC 讓你在真實硬體上驗證 field-sizing、Popover 與黏性頁尾，按專案啟停。