Closed Bug 1610899 Opened 3 years ago Closed 2 years ago

Closed captions list is cut off if there are many tracks

Categories

(Toolkit :: Video/Audio Controls, defect, P3)

Unspecified
Android
defect

Tracking

()

RESOLVED FIXED
mozilla75
Webcompat Priority ?
Tracking Status
firefox75 --- fixed

People

(Reporter: ksenia, Assigned: Gijs)

References

()

Details

Attachments

(3 files)

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

Webcompat Priority: --- → ?

(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?

Flags: needinfo?(kberezina)

(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)

Flags: needinfo?(kberezina)

(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?

Blocks: 1373537
See Also: → 1611585

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

Attached image 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.

(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?

Flags: needinfo?(jaws)

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.

Flags: needinfo?(jaws)
Priority: -- → P3

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.

Assignee: nobody → gijskruitbosch+bugs
Status: NEW → ASSIGNED
Pushed by jwein@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/f1c4e39dce89
avoid text track list being cut off, r=jaws
Backout by dluca@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/7299e0bcbfe3
Backed out changeset f1c4e39dce89 for Mochitest failures on  toolkit/content/tests/widgets/test_videocontrols_vtt.html. CLOSED TREE

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

Flags: needinfo?(gijskruitbosch+bugs)
Flags: needinfo?(gijskruitbosch+bugs)
Pushed by gijskruitbosch@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/ea48938d4cf6
avoid text track list being cut off, r=jaws
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla75
You need to log in before you can comment on or make changes to this bug.