Safari, iOS, linear-gradient and color-mix issues

I have a web site that uses CSS linear-gradient with color-mix for a background of a division. It shows up just fine in Safari on iOS and iPadOS 17.4.1. When do a screenshot, and select "Full Page", the background-image becomes all black and the text in the division is unreadable.

Here is an example of what I am doing.

div.ugly
{
    background-image: linear-gradient(to right, yellow, color-mix(in srgb, red, blue));
}

Any ideas how to get this to not turn black?

I've tried using a print media query but the "Full Page" screenshot does not use that.

It looks like it might be a bug in iOS/iPadOS.

Thanks,

Mike

Safari, iOS, linear-gradient and color-mix issues
 
 
Q