Bug 250813 – REGRESSION (iOS16): Component above video is turning gray on iOS

• Component: Compositing
• Status: NEW

[Peter]

Created attachment 464548 [details]
Video of this issue happening

## Overview:

Content with `position: absolute` layered on top of videos is sometimes turning gray.

## Steps to Reproduce:

1) On an iPhone running iOS 16 (I am on 16.1.1) open Safari or Google Chrome (v109.0.5414.83)—I’m seeing the error on both

2) View this sample web page which autoplays a video and has white text overlayed on top: https://mrcoles.com/media/test2/superset/overlay-test/

3) View example 1 for 10 seconds and view example 2 for 10 seconds—both have the same white text overlayed on top with `color: #fff` and `position: absolute`

## Actual Results:

In example 1, the text fades from white to gray (which is very noticeable over the light video). On example 2, the text appears to remain white.

If I try to take a screen recording or screenshot, the text snaps back to white.

## Expected Results:

I expect the text to remain white in all examples.

## Build Date & Hardware: Date and hardware of the build in which you first encountered the bug.

Bug encountered on Jan 18, 2023 (have noticed for about a week now).

Safari on iOS 16.1.1

## Additional Builds and Platforms:

Bug also exists on Google Chrome v109.0.5414.83 on iOS 16.1.1

## Additional Information:

See attached video. I was unable to do a screen recording because the bug disappears when a screen recording or screenshot is in progress. The most jarring example happens after the 40-second mark in the video. Also notice the iOS swipe down dashboard appears gray too—not included but if a push notification comes through that will appear grayed out too.

[Peter]

Also, you can grab all the source from the demo page, but here are the URLs for the two videos:

*  Example 1: https://mrcoles.com/media/test2/superset/overlay-test/ex1-fade.mp4 (generated via AWS Elemental MediaConvert)
*  Example 2: http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4 (the common free license video demo from online)

Is it possible that there’s something in the compression or codecs of “Example 1” that is triggering this issue?

[Radar WebKit Bug Importer]

<rdar://problem/104406146>

[Simon Fraser (smfr)]

I think what's happening here is that the video is HDR, and when you play it, the screen brightness ramps up accordingly. The "white" text is SDR white, so appears gray when composited on top of the HDR video.

[Peter]

RE SDR vs HDR—is the iPhone expected to not support HDR videos?

Either way, is there more information on how what formats the iPhone works best with?

[Jer Noble]

(In reply to Peter from comment #4)
> RE SDR vs HDR—is the iPhone expected to not support HDR videos?
> 
> Either way, is there more information on how what formats the iPhone works
> best with?

No, the problem is that the iPhone _does_ support HDR videos. But the "white" in the HDR video is brighter than the "white" of the text, which is why the text looks grey when overlayed atop the HDR video content.

This looks like it's behaving correctly. The whole point of HDR videos is that they're "brighter" than CSS #FFFFFF, and "darker" than CSS #000000. Their dynamic range is high.

In order to display the "high dynamic range" colors in the video, the device's backlight ramps up to produce more visible light. SDR content is then ramped down by an equal amount to account for this. The SDR text colors are perceived as "grey" when displayed next to the super white colors of the video.

So this is HDR videos behaving correctly, or at least, as expected.

[Peter]

> In order to display the "high dynamic range" colors in the video, the device's backlight ramps up to produce more visible light. SDR content is then ramped down by an equal amount to account for this. The SDR text colors are perceived as "grey" when displayed next to the super white colors of the video.
> 
> So this is HDR videos behaving correctly, or at least, as expected.

Does it make sense that the text initially appears white and slowly fades to *appearing* gray over the course of a couple seconds?

Is there any way to counteract this apart from re-encoding the color space as something like Rec. 709?

[Simon Fraser (smfr)]

(In reply to Peter from comment #6)

> Does it make sense that the text initially appears white and slowly fades to
> *appearing* gray over the course of a couple seconds?

That's a side effect of a way the OS ramps the display brightness gradually when starting to show HDR content.