Bug 287867 – REGRESSION (iOS 18.0.1-18.3.1): Safari fullscreen video text track cues illegible size

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Media

An issue has been introduced in iOS 18.3.1 which did not exist in iOS 18.0.1 in Safari.

With an HTML5 video using HLS (m3u8 with vtt), subtitles are displayed incorrectly.

Upon entering fullscreen, the subtitle size is minuscule, rendering at 5cqmin, which equates to ~1% of the video element height.

This is critical for accessibility, as subtitles cannot be read in fullscreen video.

[Alexey Proskuryakov]

Thank you for the report! Would it be possible to provide a test case where we could observe the problem directly?

[Radar WebKit Bug Importer]

<rdar://problem/145149369>

[Alexey Proskuryakov]

We've been unable to reproduce the issue using https://jernoble.github.io/samples/bin/WebVTT/vertical-cues-hls.html or https://jernoble.github.io/samples/bin/WebVTT/hls-styling.html.

Hi, apologies, I did not notice the response to this.

I have been able to replicate the issue which only exists from iOS 18.2+. The exact cause of the issue was introduced in this commit:

https://github.com/WebKit/WebKit/commit/bed0c2a8cb8ae071886d43295d004058a17188a0#diff-0d1c50cc9605a92ad58164815993adbe319d5bb889654c79aceb0a4c1f69a165

Reverting the change (by overriding with !important) resolves the issue, as defined here:

https://github.com/WebKit/WebKit/blob/main/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css#L68
https://github.com/WebKit/WebKit/blob/main/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css#L93

Changing the "cqmin" back to "cqh" resolves the issue for 16:9 video. I expect the change _probably_ fixes TikTok-style 2:1 aspect videos but in doing so, makes subtitles unreadable on iOS 18.2+ for 16:9 and similar "letterbox" aspect ratios.

Unfortunately I cannot provide a full working test due to NDA's and DRM.

Reopening with details.

[Jer Noble]

> Changing the "cqmin" back to "cqh" resolves the issue for 16:9 video. I expect the change _probably_ fixes TikTok-style 2:1 aspect videos but in doing so, makes subtitles unreadable on iOS 18.2+ for 16:9 and similar "letterbox" aspect ratios.

I'm not sure I understand, as 16:9 usually refers to a "landscape" aspect ratio where the width is greater than the height, in which case `cqmin` would be the same as `cqh`. And if you mean a "portrait" aspect ratio of 9:16, then that should result in larger font sizes than a "TikTok-style 1:2" aspect ratio. In neither case are the subtitles "unreadable".

You can see the difference in rendering with this example: https://jernoble.github.io/samples/bin/WebVTT/resize-aspect.html

Regardless, the default font size is just a default, and as you mention, it can be overridden.

Created attachment 474474 [details]
Before overriding CSS

Created attachment 474475 [details]
After overriding CSS

Due to DRM, the video itself does not display, but this is iOS 18.3 in fullscreen mode. 

I am unable to use the link you provided to verify the behaviour as it is only apparent in a video in fullscreen mode. Your link contains no videos, therefore impossible to enter fullscreen to verify.

The screenshots are from a 16:9 video encoded at 1920*1080 in fullscreen mode.

(In reply to gglendinning from comment #9)
> Due to DRM, the video itself does not display, but this is iOS 18.3 in
> fullscreen mode. 
> 
> I am unable to use the link you provided to verify the behaviour as it is
> only apparent in a video in fullscreen mode. Your link contains no videos,
> therefore impossible to enter fullscreen to verify.
> 
> The screenshots are from a 16:9 video encoded at 1920*1080 in fullscreen
> mode.

I should have also noted, the text tracks render at the same size in both portrait and landscape mode; the attachments are in portrait.

[Jer Noble]

Created attachment 474477 [details]
BipBop-subtitle-fullscreen

Okay, so if I understand this correctly, the underlying issue is that when a wide-landscape-aspect-ratio video (e.g., 16:9) is displayed in a tall-portrait-aspect-ratio viewport (e.g., an iPhone in portrait fullscreen mode), displaying cues at 5% of the height of the video frame (in your example, the video area will be 678px tall and 1206px wide) will result in cues whose height is 33px, or about 1.2% of the height of the device.

However, that behavior appears to match the behavior of native subtitle rendering on iOS. Subtitles are intended to be sized relative to the video content, not the letterboxed fullscreen area.  The video area is just small; the same problem exists in PiP regardless of orientation because it too is small.

Attaching an example which just uses native AVKit (i.e., not web content) to display captions in fullscreen. The captions are approximately the same size as the screenshots you posted.

[Dana Estra]

*** This bug has been marked as a duplicate of bug 290576 ***

[Dana Estra]

Thank you for your report! I accidentally opened a new issue while posting a fix for this bug- I have marked this bug as a duplicate of the new one where the fix is.