Subtitles are appearing on top of of yomitan on youtube videos

[etherealite]

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]

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]

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]

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]

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]

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.

[killergerbah]

Got it, may need to implement a way to change the CSS of the container or reconsider the usefulness of the container.

[zachdaniel]

Alternatively, if the default could be made something like half of the maximum value instead of the maximum value. I can modify the CSS of the pop up in jpd-breader so I could then set it higher.

Ideally a setting would be preferable, but that would unblock some use cases and be relatively simpler.

[zachdaniel]

I did a find and replace for 2147483647 and replaced it with 2147483646 and then set the z-index to 2147483647 in jpd-breader and that worked :)

[killergerbah]

Good to know. I am planning to fix this officially within asbplayer as well - might just end up making it a setting.