在 Apple 的高階 Mac 機型（如 MacBook Pro 14/16 吋、Studio Display）上，螢幕硬體支援 最高 120Hz 的 ProMotion 高更新率顯示，但你是否發現即便在支援的設備上，Safari 的網頁滑動依然卡頓、不如預期流暢？
其實，macOS 的 Safari 瀏覽器預設並不強制啟用 120Hz 模式。若你希望在 Safari 中享受到如絲般滑順的瀏覽體驗，本文將一步步教你手動開啟 Safari 的高更新率渲染，讓你的裝置發揮最大潛能。
為什麼 Safari 沒自動使用 120Hz？
雖然 ProMotion 支援自動調整更新率，Safari 為了節能與相容性，部分場景仍會鎖定在 60Hz，導致使用者感覺「滑動拖影、略為延遲」。
要解決這個問題，就得利用 Safari 的開發者模式（Web Inspector） 和 CSS 渲染優化技巧，強制觸發高更新率。
檢查你的裝置是否支援 120Hz
首先確認你的裝置支援 ProMotion：
- ✅ MacBook Pro 14 吋 / 16 吋 (2021 或更新機型)
- ✅ Studio Display
- ✅ Pro Display XDR（理論支援高更新率，實際受限）
接著前往「蘋果選單 > 關於這台 Mac > 顯示器」，檢查是否有顯示「最高 120Hz」或「ProMotion」字樣。
步驟一：啟用 Safari 的開發者模式
- 開啟 Safari
- 點選「Safari > 偏好設定」（或「設定」）
- 切換至「進階」頁籤
- 勾選底部的 「在選單列中顯示開發者選單」
這樣你就可以使用「開發」選單中的實驗性功能與即時檢查工具。
步驟二：強制觸發高幀率渲染
Safari 中雖沒有明確設定「強制 120Hz」，但可透過CSS 與 JS 技巧，讓系統切換到高更新率渲染模式：
方法一：使用 transform: translateZ(0)
html, body {
transform: translateZ(0);
}
這段會強制觸發 GPU 加速層，讓瀏覽器自動啟用高幀率合成（尤其在滑動時）。
方法二：啟用 will-change
body {
will-change: transform;
}
或搭配 JavaScript 動態添加：
document.body.style.willChange = 'transform';
這些技巧告訴渲染引擎：即將發生動畫，請預先優化這個區塊，進而達到順暢體驗。
步驟三：驗證是否成功啟用 120Hz
你可以使用「開發者選單」中的 「時間軸記錄 (Timelines)」 功能來分析：
- 開啟 Safari
- 按
Command + Option + I開啟 Web Inspector - 點選「Timelines」標籤
- 滾動頁面，同時觀察「每秒幀數（FPS）」是否接近 120
若 FPS 穩定在 60Hz，表示尚未觸發；接近 100~120FPS，則代表成功切換！
補充：第三方測試頁面推薦
你可以用以下網站測試是否成功：
使用這些頁面滑動時，若明顯感到更順，就表示已進入高更新率模式。
結語：讓 Safari 真正「滑起來」
即使你的 Mac 支援 120Hz，系統與瀏覽器並不一定預設啟用。透過上述技巧，我們可手動介入、觸發渲染優化，讓 Safari 滑動與動畫效果更加順暢。
如果你是設計師、前端開發者或重度使用者，建議將這些技巧納入你的開發工具包，讓網站更貼近原生應用的視覺體驗。