Subtitles are appearing on top of of yomitan on youtube videos

killergerbah / asbplayer

Browser-based media player and Chrome extension for subtitle sentence mining

MIT License

434 stars 48 forks source link

Subtitles are appearing on top of of yomitan on youtube videos #454

Open etherealite opened 2 weeks ago

etherealite commented 2 weeks ago

Using yomitan with asbplayer has suddnely become quite the problem for me since the 1.3.1 release.

Both yomitan and asbplayer have their zindex maxed out at 2147483647. Annoyingly yomitan's root dom node ends up higher up in the document tree than <div class=asbplayer-subtitles-container-*"> and ends up being covered up by the subtitles, making it impossible to use.

Thanks for your hard work.

killergerbah commented 2 weeks ago

Can you link to the website you're seeing the problem on? I can't reproduce it As a workaround in the meantime you could lower the z-index manually with a custom CSS style setting

etherealite commented 2 weeks ago

In my case it happens on any youtube video.

To reproduce:

Start playing any video, right click outside the asbplayer drop zone and select absplayer: Language-Learning with subtitles->Load Subtitles.
In the Select Subtitles dialogue box, load any subtitle stream into track 1.
As the new video is playing, click on a recommended video from the right hand column.
Repeat the process of selecting the subtitles for the newly playing video.

Subtitles will now appear on-top of the yomitan pop-up and obscure it from view.

All of this was performed on Brave browser with a clean slate profile:

killergerbah commented 2 weeks ago

In some sense the subtitles are behaving correctly by being on top of everything but in the sense that this is problematic for most users this is a bug

etherealite commented 2 weeks ago

I did try adding custom css in the Subtitle Appearance tab of the asbplayer config window. Unfortunately, it doesn't seem to work.

I am guessing that it has something to do with yomitan being in a different stacking context than that of asbplayer. For now a refresh of the page seems to be the only solution.

cspotcode commented 6 days ago

I am hitting the same issue, but with Migaku, which has similar functionality to Yomitan: it shows a popup dictionary.

The problem is that asbplayer custom CSS applies to the subtitle <span> itself, but that span is nested within <div class="asbplayer-subtitles-container-bottom"> which has z-index: 2147483647. I believe this means custom CSS z-index has no effect, because top-level z-index style has already ensured the asbplayer subtitles appear over top of everything else.

In my case, refreshing the page does not fix the issue. It would be nice to somehow adjust asbplayer's injected stylesheet to adjust this top-level <div> z-index.