Subtitle Track Position is Wrong when Same Timestamp is Displayed

[kkm]

Description

I am confident that I have come across a bug, and I hope someone can explain how to fix it.
I have spent 2 hours searching and attempting to modify the CSS or JavaScript subtitle format.

WEBVTT:
00:01.000 --> 00:50.000
LINE 1-1

00:01.000 --> 00:50.000
LINE 2-2

Both have the same timestamp, and it should display first:

LINE 1
LINE 2

However, it is displayed in the Video.js player as:

LINE 2
LINE 1

Errors

No response

What version of Video.js are you using?

Video.js 8.10.0

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Version 121.0.6167.185 (Official Build) (32-bit)

What OS(es) and version(s) does this occur with?

Windows 11

[mister-ben]

Interesting, the text track list does have them in the right order

> Array.from(player.textTracks()[0].activeCues).map(c => c.text)
< ["LINE 1-1", "LINE 2-2"] (2)

[gkatsev]

I believe that is the unfortunate, expected behavior for cues like this due to how vtt.js/webvtt works. I believe hls.js includes a workaround for something like that but I don't think we ever implemented one in Video.js.
Essentially, it's because the cues are drawn in order and once displayed they aren't supposed to be moved. UAs generally know if there's multiple cues at the same time and handle that display, but vtt.js doesn't handle it as it renders each cue in order.

[mister-ben]

FWIW Chrome, Safari and Firefox's native captions all put the 2-2 line on top too.