Additional empty transparent region when playing STPP/TTML subtitles in Chrome

[tobbee]

Environment

• Link to playable MPD file: https://livesim2.dashif.org/livesim2/timesubsstpp_de/testpic_2s/Manifest.mpd
• Dash.js version: 4.7.4
• Browser name/version: Chrome 122.0.6261.129
• OS name/version: Mac OS Sonoma14.4

Steps to reproduce

1. Just play the URL

Observed behavior

Synchronised with the TTML subtitles, there is a wide transparent region with rounded corners at the bottom of
the image. This shadow is not present when playing in Safari.

The region is similar to the subtitle region when playing subtitles using wvtt:
https://livesim2.dashif.org/livesim2/timesubswvtt_de/testpic_2s/Manifest.mpd

[nigelmegitt]

Reproduced in Chrome, bug not present in Firefox.

In Chrome, inspecting the elements, the unwanted area is not part of the DOM tree associated with the rendered TTML captions; it's not actually inspectable at all. I suspect the browser is attempting to render the VTTCue in the shadow DOM, that's intended to be used only for timing purposes to render the TTML. I'm not sure if there's a Chrome-specific way to prevent this: on my system (MacOS 14.3.1) the Chrome settings for captions takes the user to the System Preferences for Captions, but that shouldn't really be relevant - the browser shouldn't be attempting to render these VTTCues at all, so the question is why it is doing so and if it can be prevented.

[tobbee]

@nigelmegitt Do you think this is a bug in Chrome, that should be reported there?

[nigelmegitt]

@tobbee probably, yes.

[dsilhavy]

I think we discussed this before at some point and there was a CSS based solution to disable the background. I tried something like this for testing but didnt work:

::cue {
    background: blue;
}

@bbert Do you remember what we did to disable this grey background in Chrome?

In any case, as @nigelmegitt pointed out we are using TextTrack to handle the timing for the custom rendering. I would like to move to custom handling completely like we did here: https://reference.dashif.org/dash.js/nightly/samples/captioning/vttjs.html. This should also solve this issue then.

[bbert]

I think we discussed this before at some point and there was a CSS based solution to disable the background. I tried something like this for testing but didnt work:

::cue {
    background: blue;
}

@bbert Do you remember what we did to disable this grey background in Chrome?

In any case, as @nigelmegitt pointed out we are using TextTrack to handle the timing for the custom rendering. I would like to move to custom handling completely like we did here: https://reference.dashif.org/dash.js/nightly/samples/captioning/vttjs.html. This should also solve this issue then.

@jeffcunat I think you're the one who found this trick to disable the grey background, do you remember? you're still my css expert...

[jeffcunat]

Hi @bbert, as far as I remember it is some vendor specific pseudo class like those mentioned here : video::-webkit-media-text-track-region

https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F#343

[jeffcunat]

I think we discussed this before at some point and there was a CSS based solution to disable the background. I tried something like this for testing but didnt work:

::cue {
    background: blue;
}

@bbert Do you remember what we did to disable this grey background in Chrome?
In any case, as @nigelmegitt pointed out we are using TextTrack to handle the timing for the custom rendering. I would like to move to custom handling completely like we did here: https://reference.dashif.org/dash.js/nightly/samples/captioning/vttjs.html. This should also solve this issue then.

@jeffcunat I think you're the one who found this trick to disable the grey background, do you remember? you're still my css expert...

To see the actual pseudo elements that the browser uses you can activate the Developer Tools preference on Elements => Show user agent shadow DOM

[dsilhavy]

@jeffcunat Thanks for your input.
I tried changing video::-webkit-media-text-track-display which seems to be the right element, however it was still showing this gray background. I don't consider this a dash.js issue, but it would be nice if we can document a CSS based solution for this in this ticket.