[BUG] 底部錨定的字幕會在滑鼠 hover 時上飄，導致無法選取文字(含claude 建議)

[oltervir-cmyk]

Before you report

• I have searched existing issues to avoid duplicates
• I have tried with the latest available version (or can reproduce on latest)

Current vs. Expected behavior

目前行為

在 YouTube 上，字幕區塊錨定在底部（bottom anchor）。滑鼠一進入播放器，YouTube 會移除 ytp-autohide，擴充的 controlsVisible 變成 true，字幕區塊就會往上位移，幅度剛好等於控制列的高度（我這邊播放器高 1013px、控制列 59px，也就是 +5.82%）。

問題在於字幕只有在滑鼠靠近它的時候才移動，等於是個會逃跑的目標：

• 無法選取／複製字幕文字 —— 游標一靠過去，字幕就跳走了。
• 字幕容器帶有 pointer-events-auto 和 cursor-text，會壓在 YouTube 控制列上方，導致底下的進度條和按鈕很難點到。

期望行為

字幕應該固定在我拖曳設定的位置。這個控制列位移應該可以關閉（提供設定項），或者至少在游標停在字幕區塊上時不要套用。

根因（來自原始碼）

src/entrypoints/subtitles.content/ui/use-vertical-drag.ts：

const controlsOffsetPercent =
  controlsVisible && position.anchor === "bottom" && windowStyle.height > 0
    ? (controlsHeight / windowStyle.height) * 100
    : 0

const positionStyle = position.anchor === "top"
  ? { top: `${position.percent}%`, bottom: "unset" }
  : { bottom: `${position.percent + controlsOffsetPercent}%`, top: "unset" }

再加上 subtitles-view.tsx 裡的 transition-[top,bottom] duration-200，就造成每次 hover 都會有 200ms 的上飄動畫。

src/types/config/subtitles.ts 的 videoSubtitlesSchema 只開放了 position，使用者沒有任何方法可以關掉這個位移。

建議修法

在 videoSubtitlesSchema 加一個布林值（例如 followControls，預設 true 以保持現有行為）來控制 controlsOffsetPercent 是否生效。已經自行把字幕拖離控制列的使用者就可以把它關掉。

To Reproduce

1. 開啟任一 YouTube 影片（例如 https://www.youtube.com/watch?v=S2BQmy3T1Gw），並啟用 Read Frog 字幕。
2. 把字幕區塊拖到播放器底部（bottom anchor，position.percent 接近 0）。
3. 把滑鼠移開播放器，等 YouTube 控制列自動隱藏。
4. 滑鼠移回播放器內，嘗試用游標選取字幕文字。
5. 觀察結果：控制列出現的同時，字幕區塊往上位移一個控制列的高度，選取動作落在空白處。

在頁面上實測驗證：

// 控制列隱藏時
box.getAttribute('style') // => "bottom: 0%; top: unset;"
// 控制列顯示時
box.getAttribute('style') // => "bottom: 5.82%; top: unset;"   // 59px / 1013px

Which area(s) are affected? (Select all that apply)

Website

Extension version (if applicable)

1.45.1

Provide environment information

- OS: macOS 26 (Darwin 27.0.0)
- Browser: Google Chrome <請填入 chrome://version 的版本>
- Extension channel/version: Chrome Web Store <請填入>
- Website: https://www.youtube.com/watch?v=S2BQmy3T1Gw，觀察時間 2026-08-03

Additional context

可在 youtube.com/watch 穩定重現。只要是 bottom anchor 都會套用這個位移，字幕越靠近播放器底部影響越嚴重。

[frogGuaGuaGuaGua]

我已在目前的 origin/main（v1.45.1）核對過，原始碼中的位移機制確實與你量到的結果一致：

• use-controls-visible.ts 會在 YouTube 播放器的 class 改變時重新判定控制列是否可見。
• use-vertical-drag.ts 對 bottom anchor 加上 controlsHeight / videoHeight；59 / 1013 × 100 = 5.824%，與你觀察到的 5.82% 相符。
• subtitles-view.tsx 在非拖曳狀態套用 200ms 的 top/bottom transition，因此控制列顯示時會形成「游標靠近、字幕上飄」的效果。
• 目前的字幕設定只保存位置，沒有可關閉這段補償的選項。

我也搜尋了現有 Issue 與未合併 PR，暫時沒有找到相同問題或正在處理的 PR。以上已確認程式碼路徑；我尚未在同一個 YouTube 播放情境中獨立完成瀏覽器端重現。

在開 PR 前需要先確定一個產品行為：你希望第一版採用哪一種？

1. 新增可持久化的「自動避開播放器控制列」開關（預設開啟；關閉後字幕固定，但可能覆蓋控制列）。
2. 不新增設定，平常仍自動避讓；只有游標停在字幕上或正在選取文字時暫停位移。

[oltervir-cmyk]

方案 1吧，副檔的 MP4 是飄移時的問題，滑鼠無法選取移動字幕的位置也無法選擇開啟控制按鈕 CleanShot 2026-08-04 at 20.47.01.mp4 <https://drive.google.com/open?id=1g-ZMBLwdYJHUVGZsaYZd1_Lv7MGTbCBb> GuaGua ***@***.***> 於 2026年8月3日週一 上午11:10寫道：

…

*frogGuaGuaGuaGua* left a comment (mengxi-ream/read-frog#2031) <#2031 (comment)> 我已在目前的 origin/main（v1.45.1）核對過，原始碼中的位移機制確實與你量到的結果一致： - use-controls-visible.ts 會在 YouTube 播放器的 class 改變時重新判定控制列是否可見。 - use-vertical-drag.ts 對 bottom anchor 加上 controlsHeight / videoHeight；59 / 1013 × 100 = 5.824%，與你觀察到的 5.82% 相符。 - subtitles-view.tsx 在非拖曳狀態套用 200ms 的 top/bottom transition，因此控制列顯示時會形成「游標靠近、字幕上飄」的效果。 - 目前的字幕設定只保存位置，沒有可關閉這段補償的選項。 我也搜尋了現有 Issue 與未合併 PR，暫時沒有找到相同問題或正在處理的 PR。以上已確認程式碼路徑；我尚未在同一個 YouTube 播放情境中獨立完成瀏覽器端重現。 在開 PR 前需要先確定一個產品行為：你希望第一版採用哪一種？ 1. 新增可持久化的「自動避開播放器控制列」開關（預設開啟；關閉後字幕固定，但可能覆蓋控制列）。 2. 不新增設定，平常仍自動避讓；只有游標停在字幕上或正在選取文字時暫停位移。 — Reply to this email directly, view it on GitHub <#2031?email_source=notifications&email_token=CBZJDRHR7ZPNJM5JPEQQP4L5H77A7A5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKMJWGE4DSMRRHE22M4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2KYZTPN52GK4S7MNWGSY3L#issuecomment-5161892195>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/CBZJDRGGZDXD4MR364T56635H77A7AVCNFSNUABFKJSXA33TNF2G64TZHM4TMNZXGM4DONJRHNEXG43VMU5TKMBUGU4DSMRVGIYKC5QC> . Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/CBZJDRGEENCF5UNRGY7IYN35H77A7A5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKMJWGE4DSMRRHE22M4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2KUZTPN52GK4S7NFXXG> and Android <https://github.com/notifications/mobile/android/CBZJDRG6CNXRZ4MCCYQFH4D5H77A7A5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKMJWGE4DSMRRHE22M4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2K4ZTPN52GK4S7MFXGI4TPNFSA>. Download it today! You are receiving this because you authored the thread.Message ID: ***@***.***>

[frogGuaGuaGuaGua]

已開始處理方案 1；我已從最新的 origin/main 建立獨立分支，目前正在補回歸測試，並確認設定持久化與 YouTube 字幕位移行為。PR 建立後會在這裡更新連結和實際驗證結果。

另外，目前提供的 Google Drive 連結會要求登入，無法公開讀取錄影；這不會阻擋依照已確認的方案 1 實作。若希望我也核對該影片，請將分享權限設為「知道連結的任何人皆可檢視」。

[mengxi-ream]

@taiiiyang

[oltervir-cmyk]

https://drive.google.com/file/d/1g-ZMBLwdYJHUVGZsaYZd1_Lv7MGTbCBb/view?usp=drivesdk MengXi ***@***.***>於 2026年8月4日週二，23:38寫道：

…

*mengxi-ream* left a comment (mengxi-ream/read-frog#2031) <#2031 (comment)> @taiiiyang <https://github.com/taiiiyang> — Reply to this email directly, view it on GitHub <#2031?email_source=notifications&email_token=CBZJDRHIBRHCX25JUX67AC35IH7P3A5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKMJYGEZDQOJVGAZKM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2KYZTPN52GK4S7MNWGSY3L#issuecomment-5181289502>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/CBZJDRCYQXRLFQIB36IT3WL5IH7P3AVCNFSNUABFKJSXA33TNF2G64TZHM4TMNZXGM4DONJRHNEXG43VMU5TKMBUGU4DSMRVGIYKC5QC> . Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/CBZJDREB2BQFJIQBQ6KQB6L5IH7P3A5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKMJYGEZDQOJVGAZKM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2KUZTPN52GK4S7NFXXG> and Android <https://github.com/notifications/mobile/android/CBZJDREIGZKZ6OSYRSVFOML5IH7P3A5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKMJYGEZDQOJVGAZKM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2K4ZTPN52GK4S7MFXGI4TPNFSA>. Download it today! You are receiving this because you authored the thread.Message ID: ***@***.***>

[mengxi-ream]

drive.google.com/file/d/1g-ZMBLwdYJHUVGZsaYZd1_Lv7MGTbCBb/view?usp=drivesdk

MengXi @.***>於 2026年8月4日週二，23:38寫道：
…

这个看起来是一个 bug。整个字幕都脱离屏幕了。你换一个别的浏览器安装会出现类似的问题吗？暂时我这边没有复现

[taiiiyang]

https://drive.google.com/file/d/1g-ZMBLwdYJHUVGZsaYZd1_Lv7MGTbCBb/view?usp=drivesdk

MengXi @.***>於 2026年8月4日週二，23:38寫道：

我来看下，之前也有其他人反馈过这个问题

[taiiiyang]

这个bug有复现的路径可以提供下吗

[oltervir-cmyk]

這幾天又變得正常了🤔️ taiiiyang ***@***.***>於 2026年8月8日週六，23:01寫道：

…

*taiiiyang* left a comment (mengxi-ream/read-frog#2031) <#2031 (comment)> 这个bug有复现的路径可以提供下吗 — Reply to this email directly, view it on GitHub <#2031?email_source=notifications&email_token=CBZJDRE5MU56SCVUTBOH76T5I46F7A5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKMRSGY3DMNBQGQZKM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2KYZTPN52GK4S7MNWGSY3L#issuecomment-5226664042>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/CBZJDRGHSTDWPQFUPUU55AT5I46F7AVCNFSNUABFKJSXA33TNF2G64TZHM4TMNZXGM4DONJRHNEXG43VMU5TKMBUGU4DSMRVGIYKC5QC> . Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/CBZJDRB2GFHUL6GU5DIIIXT5I46F7A5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKMRSGY3DMNBQGQZKM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2KUZTPN52GK4S7NFXXG> and Android <https://github.com/notifications/mobile/android/CBZJDRGDGLIYEQO3AWJ3JFT5I46F7A5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKMRSGY3DMNBQGQZKM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2K4ZTPN52GK4S7MFXGI4TPNFSA>. Download it today! You are receiving this because you authored the thread.Message ID: ***@***.***>

[mengxi-ream]

這幾天又變得正常了🤔️

taiiiyang @.***>於 2026年8月8日週六，23:01寫道：

taiiiyang left a comment (#2031)

#2031 (comment)

这个bug有复现的路径可以提供下吗

—

Reply to this email directly, view it on GitHub

#2031,

or unsubscribe

https://github.com/notifications/unsubscribe-auth/CBZJDRGHSTDWPQFUPUU55AT5I46F7AVCNFSNUABFKJSXA33TNF2G64TZHM4TMNZXGM4DONJRHNEXG43VMU5TKMBUGU4DSMRVGIYKC5QC

.

Triage notifications, keep track of coding agent tasks and review pull

requests on the go with GitHub Mobile for iOS

https://github.com/notifications/mobile/ios/CBZJDRB2GFHUL6GU5DIIIXT5I46F7A5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKMRSGY3DMNBQGQZKM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2KUZTPN52GK4S7NFXXG

and Android

https://github.com/notifications/mobile/android/CBZJDRGDGLIYEQO3AWJ3JFT5I46F7A5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKMRSGY3DMNBQGQZKM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2K4ZTPN52GK4S7MFXGI4TPNFSA.

Download it today!

You are receiving this because you authored the thread.Message ID:

@.***>

那我们先关闭了，之后有需要可以重新开启