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
MikeyMc
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution
Last seen
User for
From
Charlottesville, VA, United States
Post
Replies
Boosts
Views
Activity
For my web page I just added a static property for the first time. It works just fine on Google Chrome and its variants. However, when I try it on iOS/iPadOS 14.3 Safari, I can't get it to work.
I've checked on MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static, and it states that Safari supports the static keyword. Any idea what the problem is?
Here is a simple HTML document that I used to test this...
-- begin HTML document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iOS Static Bug</title>
</head>
<body>
<h1>iOS Static Bug</h1>
<script>
document.writeln("Before class");
class McClass
{
constructor()
{
this._mcVar = 0;
}
static mcStatic = 123;
}
document.writeln("<p>mcStatic = " + McClass.mcStatic++ + "</p>"); // displays 123
document.writeln("<p>mcStatic = " + McClass.mcStatic++ + "</p>"); // displays 124
</script>
</body>
</html>
-- end HTML document
Thanks,
Mike