在特定解析度下video.js會不斷觸發捲軸

這篇是 troubleshoot 的紀錄desu

最近在寫公司直播系統的前端，遇到有 user 回應他的畫面會一直「跳動」，
後來 PM 也遇到有傳錄影來，發現是 scroll 不斷出現、消失，像是下面這樣：

後來發現其實就是 scroll 會不斷出現、消失，代表有東西不斷影響網頁長度

不過到底是什麼呢？
還請了設計師來幫忙看

發現是 video.js 產生的 DOM 有兩處不斷被更新：
（vjs-progress-holder、vjs-text-track-display）

接著打開 Performance tab 錄製在跳動期間執行的動作

大致上可以看到是有頻率的在執行程式，後來仔細看大致上有兩個很常發生的操作：

• 計算影片剩餘時間、並更新到 DOM 中
• removeChild() 然後再 appendChild()

尤其後者看起來就效能不友善阿😂

後來是找方法關掉 progress bar、text track display 才暫時緩解這問題
不過加上 .vjs-liveui 這個 class 好像也可以