1738555 - [webvtt] Setting low position on a cue crushes or hides the caption

Status: UNCONFIRMED

(Core :: Audio/Video: Playback, defect, P3)

Description

[me]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:93.0) Gecko/20100101 Firefox/93.0

Steps to reproduce:

There are various styling support issues with WebVTT tracks. You can see some tests here - https://codepen.io/chrislachance/pen/abWXaYj?editors=1000 and my upcoming article discussing all major WebVTT issues here on Nov 1, 2021 - https://chrislachance.com/web-captions-3-caption-styling-challenges

All issues cited are for all versions of Firefox (except iOS obvisouly :) )

Issue 1: Setting position:0% (or something low like position:2%) on a cue
Issue 2: Use a Region within a VTT
Issue 3: Targeting an ID, class, tag, or region within a VTT with external CSS like W3C guidance states - https://www.w3.org/TR/webvtt1/#example-cue-selector
Issue 4: Styling with inline CSS, internal CSS, or font tag with inline style within the VTT like MDN docs state - https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#within_the_webvtt_file_itself
Issue 5: Styling with default colors within the VTT like the W3C states - https://www.w3.org/TR/webvtt1/#example-a15d9824

Actual results:

Result 1: Crushes or hides the caption.
Result 2: Totally different rendering for the caption in a region.
Result 3: Totally ignored.
Result 4: Totally ignored.
Result 5: Totally ignored.

Expected results:

Expectation 1: Text positions as far as possible, doesn't collapse size.
Expectation 2: No unique style.
Expectation 3 - 5: Custom styles apply.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Hiroyuki Ikezoe (:hiro)]

Moving into Audio/Video playback (I am assuming it's an issue there).

Comment 3

[Jon Bauman [:jbauman:]]

Thanks for the report! I'm investigating, but I wanted to make sure you were aware of the webvtt meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=webvtt. All the known issues regarting WebVTT should be listed as dependencies on that bug. Here's a link to view them all as a tree and show the full names that you may find helpful: https://bugzilla.mozilla.org/showdependencytree.cgi?id=629350&hide_resolved=1.

Comment 4

[me]

Ah, I was not aware. Thanks for letting me know.

Comment 5

[Jon Bauman [:jbauman:]]

Issue 4: Styling with inline CSS, internal CSS, or font tag with inline style within the VTT like MDN docs state - https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#within_the_webvtt_file_itself

This sounds like https://bugzilla.mozilla.org/show_bug.cgi?id=865395, would you agree?

Actually, lack of ::cue support seems to potentially cover all of these issues. Are there any that you see which would not be covered by that?

Comment 6

[me]

I would say it's likely a yes to all but:
• Issue 1, where position unexpectedly changes size.
• Issue 4, where even internal CSS targeting ::cue holistically doesn't work (https://chrislachance.com/wp-content/uploads/sakura_internal.vtt)

::cue styling does work, but only via external CSS.

Comment 7

[me]

I would say yes to all but issue 1, where position unexpectedly changes size or hides the text altogether.

Comment 8

[me]

(In reply to me from comment #6)

I would say it's likely a yes to all but:
• Issue 1, where position unexpectedly changes size.
• Issue 4, where even internal CSS targeting ::cue holistically doesn't work (https://chrislachance.com/wp-content/uploads/sakura_internal.vtt)

::cue styling does work, but only via external CSS.

Ignore this, issue 4 is mentioned in that other bug.

Comment 9

[Jon Bauman [:jbauman:]]

Attachment: Screen Shot 2021-11-02 at 2.38.28 PM.png

So, that leaves issue 1, which is the "Non-Safari position align bug", correct? Is this an accurate reproduction of the problem? How would you expect this one to render?

Please forgive the CSS ignorance; most of my life lives in the deep backend

Comment 10

[me]

No worries. This isn't quite a CSS issue, just the way the VTT is delivering captions via VTT attributes.

The interesting thing here is that Safari has a min-width when position gets low enough with no size set (You can see this issue here - https://ronallo.com/demos/webvtt-cue-settings/, adjust the position knob while in Safari – can also can compare to Chrome & Firefox too.)
But when moved to position:100% EVERY browser removes the caption altogether.

My expectation is that text should be legible and visible without setting alignment, however after reading the spec, it may seem to stem from the calculation proposed in the spec (#14 - https://www.w3.org/TR/webvtt1/#processing-model). I'll spend some time with this and get back to you, perhaps the spec needs to change.

But it seems Safari at least has it right for legibility (for left alignment, anyways).

Comment 11

[me]

Submitted a bug to the VTT spec itself.
W3C group thinks it may be a bug at the spec level, but need to review further.

https://github.com/w3c/webvtt/issues/500