No background shading for subtitles in Chrome

[djonnie 14]

Hi,

 

When playing movies (with external SRT files) with the Web Client in Chrome background shading for subtitles has disappeared.

 

Emby Server 3.0.7100.0

 

I'm running Chrome 53.0.2785.143 m (64-bit) on my PC, but it's the same with Chrome on my tablet.

 

In Firefox everything works fine though.

 

Chrome:

 

 

Firefox:

 

 

In bright scenes it can be very difficult to read the subtitles without the shading.

 

Is this changed in Emby (I upgraded a few weeks ago) and is it customizable?

 

Thanks,

 

djonnie

 

[Luke 37058]

yes it was changed based on community feedback.

[djonnie 14]

Could this please become configurable? Playback in Chrome is unusable at the moment, since many times the subtitles are unreadable.

[Luke 37058]

It's a possibility to consider for the future, thanks.

[djonnie 14]

I'm wondering, if this has changed because of feedback, why is this only implemented in Chrome? Or is this default Firefox behavior?

[Luke 37058]

Not all browsers allow custom styles for it, although i think newer versions of firefox might now.

[djonnie 14]

Tried to fix it using custom CSS but ended up editing mediaplayer-video.css:

 

::cue {
    background-color: rgba(0,0,0,.8);
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    -webkit-font-smoothing: antialiased;
    font-family: inherit;
}
 

Now it works fine in Chrome.

 

These settings will be overwritten during Emby Server upgrades, that's why I'm documenting these changes. (Besides, auto updating does not work on my RPI.)

Edited October 9, 2016 by djonnie

[Happy2Play 8281]

Tried to fix it using custom CSS but ended up editing mediaplayer-video.css:

 

::cue {

    background-color: rgba(0,0,0,.8);

    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);

    -webkit-font-smoothing: antialiased;

    font-family: inherit;

}

 

Now it works fine in Chrome.

 

These settings will be overwritten during Emby Server upgrades, that's why I'm documenting these changes. (Besides, auto updating does not work on my RPI.)

No need to modify the server file.  Just need to force Custom CSS with "!important".

::cue {
    background-color: rgba(0,0,0,.8) !important}

[djonnie 14]

@@Happy2Play

 

THANKS!

[ebr 14910]

If possible, perhaps an outline instead of a shadow would make them more readable...?