Rasterization miscolors disabled components on Safari

[samreid]

Discovered in https://github.com/phetsims/wave-interference/issues/514. Brief summary: when using Node.rasterized or the PhET Menu => Screenshot button, the disabled stopwatch rewind button is much darker. Note: this happens on Mac/Safari but not Mac/Chrome.

In this screenshot, the top is the live sim and the bottom is the screenshot. Please ignore the yellow highlight:

If the problem were just this sim, I wouldn't say it is a blocking problem (for Waves Intro context). It's not a usability problem or buggy. However, I recommend we mark as high-priority or blocking until we better understand the scope and cause.

@jonathanolson can you please take the lead? Feel free to adjust the priority as you recommend.

[jonathanolson]

I'm curious about whether this is a new-Safari thing, I swear I had tested Safari for filter color issues previously.

scenery/tests/filter-tests.html shows a comparison of filter handling for different configurations, for instance in Chrome:

Note the darker Canvas "filter" columns, which appear that way now because we're using that for performance in https://github.com/phetsims/scenery/issues/1139.

However now Safari 14.0.2 is showing:

[jonathanolson]

So it seems specifically that a DOM CSS filter on an element that contains SVG and Canvas content will behave differently than a DOM CSS filter that just has SVG content.

[arouinfar]

In phet-io meeting we decided that this isn't a blocking issue. Before we close as wontfix, we should collect more examples of this issue to make sure they are all as minor as the rewind button in the StopwatchNode.

@KatieWoe please be on the lookout for issue in Safari in all QA tests. I'll go ahead and add this issue to the open QA issues.

[DevonQui]

Here's another example with the rewind button in https://github.com/phetsims/QA/issues/599 This is from just taking a selection of my screen with my Mac

This is from using the actual screenshot button within the simulation

[DevonQui]

I tested this for https://github.com/phetsims/QA/issues/596 (Atomic Interactions) but I wasn't able to produce the same result This is a pic from the live sim

This is screenshot from my Mac

Besides the live sim screenshot being a little grainy, the disabled buttons appear to be the same color for both.

[KatieWoe]

Second example from https://github.com/phetsims/QA/issues/599.

[KatieWoe]

Seen in https://github.com/phetsims/QA/issues/600, but nothing alarming yet

[DevonQui]

Found some examples of this in https://github.com/phetsims/QA/issues/600 but like Katie said, nothing concerning. Screenshots from the live simulation

Screenshots from my Mac

[Nancy-Salpepi]

Just noting that this is still an issue with mac + safari. I'm currently using macOS 12.3.1 and safari 15.4

[KatieWoe]

Seen in https://github.com/phetsims/qa/issues/823.