Windows 內建螢幕錄影與下拉選單說明
前言
在網頁開發過程中，展示和演示自己的作品往往是非常重要的一部分。然而，許多開發者在進行網頁錄影或 demo 時，經常遇到一些不易察覺的問題，特別是在顯示浮動元素（如下拉選單、模態視窗等）時，這些元素可能無法正確地被捕捉或顯示。這樣的問題可能會讓觀眾誤以為網站有錯誤，或者導致演示效果不如預期。
為了解決這些困擾，並幫助開發者和設計師更順利地展示他們的作品，我創建了這份說明文件。這份文件深入探討了不同平台和工具的螢幕錄影行為，特別是針對下拉選單和浮動層無法顯示的常見問題，並提供了一些實用的解決方案。希望能夠幫助各位在進行網頁演示時，避免這些問題，並提升作品的展示效果。
1. Windows + Alt + R 的錄影行為
使用 Windows + Alt + R 呼叫的內建錄影工具是 Xbox Game Bar，主要針對遊戲或單一視窗錄影。
- 錄影抓取的是「目前活動視窗的 buffer」。
- 浮動元件（例如下拉選單、modal）有時不會被錄到。
- 螢幕錄影計時器通常不會出現在實際錄好的畫面中，因為它是系統 overlay。
注意：這不是程式問題，而是 Xbox Game Bar 的設計限制。
2. 為什麼下拉選單會消失？
現代瀏覽器（Chrome、Edge）會將畫面拆成多個 GPU 合成層：
- 主畫面層：一般 DOM 元素。
- 浮動層 / portal / tooltip / 下拉選單：可能渲染到 GPU 合成層。
Xbox Game Bar 有時只抓主畫面層，因此浮動層會消失。
3. 手機內建螢幕錄影行為差異
- 手機錄影抓的是整個 framebuffer。
- 所有渲染層都會被錄到，包括下拉選單、鍵盤、通知。
- 因此手機錄影看起來完整，不會有元素消失。
4. 與 HTML 的關聯性
HTML 本身只是 DOM 結構標記，例如 <select> 或 <div>。它不會決定螢幕錄影效果。
真正影響是否錄到的因素是：
- 瀏覽器如何渲染：CSS、JS、portal/teleport 會把浮動元件渲染到不同圖層。
- 錄影工具抓取的圖層範圍。
5. 解決方式
- 錄整個桌面而不是單一視窗。
- 關閉瀏覽器硬體加速（設定 → 系統 → 關閉硬體加速）。
- 使用專業工具，例如 OBS Studio，抓取完整畫面。
6. 流程圖示意
7. 下拉選單動畫示意
模擬下拉選單在錄影中可能消失的情況：
說明：
Xbox Game Bar錄影時，下拉選單可能不會顯示 → 模擬為消失動畫。- 手機螢幕錄影則會正常錄到所有層 → 模擬為淡入顯示。
8. 影片作證
以下是實際錄影示範，展示 Windows Xbox Game Bar 與手機螢幕錄影的差異：
-
Windows Xbox Game Bar 錄影示範：
-
手機螢幕錄影示範：
9. 電腦與手機錄影的計時器差異
除了錄製範圍的不同，電腦與手機錄影的另一個重要差異在於是否顯示計時器：
- 電腦 (Windows Xbox Game Bar)： 電腦內建的 Xbox Game Bar 在進行螢幕錄影時會顯示計時器，顯示已過了多少時間。然而，由於計時器是系統覆蓋層，這部分通常不會出現在實際錄好的畫面中。
- 手機： 手機的內建螢幕錄影裝置在進行螢幕錄影時通常不會顯示計時器，但會錄製整個畫面，包括狀態欄、通知等。這意味著手機錄影會有一個更完整的錄影體驗，不會錯過任何畫面元素。
總結： 在 Windows Xbox Game Bar 的錄影中，計時器顯示與否是一個系統層級的限制，而手機螢幕錄影則可以完整錄製所有顯示的內容。
10. 小結
- Windows Xbox Game Bar 錄影計時器不會出現，是正常行為。
- 下拉選單消失，是因為 GPU 合成層沒有被錄到，而非 HTML 問題。
- 手機螢幕錄影抓 framebuffer，所以所有畫面元素都會錄到。
- 錄影效果差異主要取決於「錄影工具抓取的圖層」而非程式碼。