As reported here https://github.com/webcompat/web-bugs/issues/47774

Steps to reproduce:

1. Access https://www.apple.com/ca/apple-events/september-2019/
2. Play the keynote video from the top of the screen.
3. Tap the closed captions button from the video controls.
4. Observe the language options from the list.

Expected Behavior:
English and Espanol language options must be displayed.

Actual Behavior:
English and Espanol options are hidden

Seems like the options container textTrackList is cut off by the following rule

.videocontrols {
    overflow: hidden;
}

An example: https://codepen.io/ksy36/pen/dyPaopz

(In reply to Ksenia Berezina [:ksenia] from comment #0)

1. Access https://www.aple.com/apple-events/september-2019/

This link doesn't work for me - I get redirected to the apple main page... does it still work for you? And is this also a problem on desktop or only in Firefox Preview?

(In reply to :Gijs (he/him) from comment #1)

(In reply to Ksenia Berezina [:ksenia] from comment #0)

1. Access https://www.aple.com/apple-events/september-2019/

This link doesn't work for me - I get redirected to the apple main page... does it still work for you? And is this also a problem on desktop or only in Firefox Preview?

Oh, looks like the correct link is https://www.apple.com/ca/apple-events/september-2019/, from the URL field of the bug, which seems to work but has custom controls on desktop. I guess we're somehow getting different markup on mobile?

Yes, sorry, the correct link is https://www.apple.com/ca/apple-events/september-2019/. I'll change the description. And yeah, on mobile the markup is different, I get default controls in Firefox and in Chrome.

The issue is with the default controls. An example https://codepen.io/ksy36/pen/dyPaopz illustrates the behavior - when the video element is small enough, a container with captions is cut off (this is reproducible on desktop)

(In reply to Ksenia Berezina [:ksenia] from comment #3)

Yes, sorry, the correct link is https://www.apple.com/ca/apple-events/september-2019/. I'll change the description. And yeah, on mobile the markup is different, I get default controls in Firefox and in Chrome.

The issue is with the default controls. An example https://codepen.io/ksy36/pen/dyPaopz illustrates the behavior - when the video element is small enough, a container with captions is cut off (this is reproducible on desktop)

Thanks, this helps! Unfortunately due to bug 1611585 I'm struggling to get an idea of how easy it'd be to fix this. In particular, I'm not sure how easy it is to get nodes inside our video controls to "escape" the bounding box of the video. I'm actually a little curious how you found the overflow: hidden CSS you referenced in comment #0 - perhaps this stuff works better with geckoview?

Thanks for looking into this :) I've enabled devtools.inspector.showUserAgentShadowRoots pref in Nightly to be able to inspect the video element (#shadow-root element becomes visible as <video> element child).

Just in case, in Chrome this would be "Show user agent shadow DOM" under Settings>Preferences>Elements

It's not as simple as just removing the overflow:hidden; rule on .videocontrols. The top two items, Off and English, don't display their text though the background for the menu does visibly overflow the video element. I can't find what is causing the text to get clipped but not the background color.

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #6)

Created attachment 9124100 [details]
2020-02-03_1205.png

It's not as simple as just removing the overflow:hidden; rule on .videocontrols. The top two items, Off and English, don't display their text though the background for the menu does visibly overflow the video element. I can't find what is causing the text to get clipped but not the background color.

Is this a visual thing on Windows, perhaps web-render related? When testing on a local build on macOS with the codepen from comment #0, removing overflow: hidden seems sufficient.

Do you recall why we have the overflow: hidden? Is it just to prevent the "normal" controls from overflowing out of the container if the website sized it, and if so, what do we do to avoid this if we want the popup to "escape" - I guess we need to move some things around?

I don't recall exactly, but I think it had to do with getting overflow events so we could resize the control bar as the <video> element changed size. Could we put a scrollbar on this popup instead? At some point even if it overflowed it still might not fit the frame size.

The text track list should not exceed the size of the video controls. Because it is positioned
absolutely, and because the height of the video is not known in the CSS, the only way to
ensure the list's height does not exceed the video's height is to set a 'top' value as well as
a 'bottom' one.

Unfortunately, that then means that if the list is quite small and the video quite tall, the
popup becomes way too large.

To avoid this, I've added another level of nesting, and used flexbox to align the actual list
to the bottom of the container for the list.

Backed out changeset f1c4e39dce89 (bug 1610899) for Mochitest failures on toolkit/content/tests/widgets/test_videocontrols_vtt.html. CLOSED TREE

Log:
https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=288989526&repo=autoland&lineNumber=8767

Push with failures:
https://treeherder.mozilla.org/#/jobs?repo=autoland&group_state=expanded&revision=f1c4e39dce894d68b8112544439310558bf222ba

https://treeherder.mozilla.org/#/jobs?repo=try&revision=6e5b86455fb730cc8d331ff1bcf0c939de95f520

https://hg.mozilla.org/mozilla-central/rev/ea48938d4cf6