Subtitles dark background box

[gwenvador]

Describe the bug
When playing a video on webclient there is a transparent black box in the background with the subtitles.

Expected behavior
There should not be a background black box.

Screenshots
https://i.imgur.com/hBClWUz.png

System (please complete the following information):

• OS: MAC OS Catalina
• Browser: Brave/Chrome (box spreading the full width), safari (around the subtitle)
• Jellyfin Version: 10.5.5

Additional context
There is a reddit post on this issue but not resolved or reported on github: https://www.reddit.com/r/jellyfin/comments/ghwswp/deactivate_subtitle_backgroundbox/

[ghost]

Also seems to be occurring in Microsoft Edge with the full width box.
(Here's a screenshot.)

[gwenvador]

I guess you are on windows? What's your full config?

[heyhippari]

I'm not able to reproduce this on unstable (10.6).

Could one of you try, so we can confirm if this still happens or not? (Make sure to backup you current database)

[ghost]

I guess you are on windows? What's your full config?

I am on macOS 10.15.5, Jellyfin 10.5.5 stable.
(I would test it on unstable but I don't see a build for macOS)

[dmitrylyzo]

I found that iOS has some styling: Settings > Accessibility > Subtitles & Captioning > Style.
macOS has similar in System Settings.
If this is the case, then I believe that we cannot change this with either CSS or JS.

If only someone can provide ShadowDOM of videoplayer. Maybe some pseudo elements could be tuned.

[heyhippari]

It's likely to be either -webkit-media-text-track-container, -webkit-media-text-track-display or cue.

Given the screenshot, my guess would be on -webkit-media-text-track-display.

[dmitrylyzo]

Tried changing background-color with custom CSS.
::-webkit-media-text-track-container affects the entire screen.
::-webkit-media-text-track-display affects the lines occupied by subtitles.
::cue we already made it transparent.

Also tried changing style in iOS settings on iPad - it overrides our style.

So either there are other pseudo-elements in iOS, or it is impossible to do this.

[heyhippari]

@dmitrylyzo There's apparently a -webkit-media-text-track-display-backdrop specific to Safari.

Edit: It also needs !important

[dmitrylyzo]

On iPhone 5S ::-webkit-media-text-track-display-backdrop{background-color:red!important} produces red background, as expected. But this doesn't work on iPad Pro.

But... if I select "Classic" predefined style, our style works.

[ghost]

macOS has this page in accessibility settings:

Changing those settings to remove the background and making the size small improves the caption... but it lowers it down below the bottom edge of the video, which cuts off completely on longer lines.

[dmitrylyzo]

@mattgeowild Have you tried Classic option?

[vedhavyas]

i have tried the classic option but it still the same

[dannymichel]

I'm sure there's a way to get rid of it within the app and not in our operating system settings as Emby and plex have done it. Emby even gives you an option to control the background opacity. I know this isn't Emby. Just saying it's possible

[Arche151]

Same issue here...

[RayJameson]

same issue here on MacOS Sonoma 14.2.1 (23C71), Jellyfin version 10.8.13

UPD. Setting to Captures "Classic" in Accessibility settings helped for now

[ealcantara22]

I use brave browser so this should work for other Chromium base browsers in MacOS. Like some of the responses above, create a new accessibility caption entry checking the Allow video to override checkbox for all options. Save and restart your browser.

[ShaleenAg]

Still facing this issue even after creating a custom Caption entry and disabling background color using Edge and Mac OS 13

EDIT: a restart fixed it

[manipEgo]

Just confirmed that the same problem on Win11 is also caused by the accessibility settings. A restart is also needed.