Initial cues added to TextTrack are removed by browser

[robwalch]

What version of Hls.js are you using?

development (v1.7 alpha)

What browser (including version) are you using?

Chrome and Safari

What OS (including version) are you using?

Mac OS

Test stream

https://playertest.longtailvideo.com/adaptive/captions/playlist.m3u8

Configuration

{}

Additional player setup steps

No response

Checklist

• The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• The issue occurs in the stable client (latest release) on https://hlsjs.video-dev.org/demo and not just on my page
• The issue occurs in the latest client (main branch) on https://hlsjs-dev.video-dev.org/demo and not just on my page
• The stream has correct Access-Control-Allow-Origin headers (CORS)
• There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

1. Play content with 608 captions or VTT subtitles

Expected behaviour

All captions and subtitles are added to TextTracks.

What actually happened?

Initial cues added to TextTrack are deleted without "cuechange" being evoked on the TextTrack. This bug is not present in v1.6. This only happens in development, where DOM TextTracks are being used. This is a regression introduced with #7515, but it appears to be specific to DOM TextTracks in Chrome and Safari. It seems like the browser removes cues after isetting the mode to "hidden" and appending media. Setting the mode to "hidden" when creating the track, and then waiting until content is appended before adding cues, prevents them from being ejected.

The fix should be to defer cue insertion until after the media append is started or complete.

Console output

na

Chrome media internals output