Designs of Mystery Launchers 5-6 can fail to render after a period of time

[Nancy-Salpepi]

Test device iPad 9th generation

Operating System iPadOS 17.3

Browser Safari

Problem description For https://github.com/phetsims/qa/issues/1060, after playing with the sim for a while, Mystery Launchers 5 and 6 appeared as gray and black instead of with their designs. Restarting the sim didn't fix the problem; only clearing my cache did. This happened 2 times on the iPad and once with mac/safari during testing.

Visuals

[matthew-blackman]

@samreid and I are unable to reproduce this with Safari on macOS.

@Nancy-Salpepi how long does this take to trigger this? Is there a direction that we can pursue to try and reproduce it reliably?

@jonathanolson we are also wondering if this looks like something you are aware of. We are using svgs for the launcher pattern, but there is no difference in the way that launchers 5 and 6 are being rendered compared to the other launchers. Is there something we can pursue further to try and track down the source of this rendering issue?

[Nancy-Salpepi]

I wish I had more info to give. I will go back and take another look on the iPad because I spent less time testing on that device and it happened twice there.

[Nancy-Salpepi]

I looked back at the dev version and the easiest way to reproduce it on the iPad/mac + safari is to keep changing the query parameters.

For example, with mac + safari:

1. Clear cache
2. Open Variability screen of sim --all looks good
3. Add ?autoGenerateData=true to url
4. Check Launchers 5-6 on Variability screen
5. Change to ?autoGenerateData=false
6. Check Launchers
7. keep repeating

I also saw it with iPad by changing between stringTests. I hope this helps!

https://github.com/phetsims/projectile-data-lab/assets/87318828/dc4cda7d-f331-4528-81f0-6d5fc3336e3c

[samreid]

I saw the problem by following @Nancy-Salpepi instructions and it happened after setting auto generate to false only one time, on the built dev version:

Note it is only broken in the icon and not in the play area.

[samreid]

I was surprised to see that removing the rasterization did not help here. The icons are rendered in https://github.com/phetsims/projectile-data-lab/blob/main/js/common/view/MysteryLauncherIcon.ts, and we are ready to request help from @jonathanolson

[Nancy-Salpepi]

To get the Launcher in the play area solid gray/black:

1. On the Variability screen click on Launcher 5
2. Add ?stringTest=double
3. If the Launcher 5 icon is gray on the Variability screen, select it --the launcher should also be gray in the play area
4. If the Launcher 5 icon isn't gray, change the stringTest to something else until it is and then repeat step 3.

Hope this helps!

[jonathanolson]

Isolated to somewhat-minimal html: https://bayes.colorado.edu/dev/phettest/scenery/tests/browsers/safari-pattern-test.html

If loaded in Safari (in a new tab), it seems to randomly decide to show the texture or not.

[jonathanolson]

It seems like rasterization actually might be required for this bug to present, but I haven't tested fully without rasterization.

[jonathanolson]

Actual (Safari, sometimes) vs. Expected (Chrome)

[samreid]

In https://github.com/phetsims/projectile-data-lab/issues/271#issuecomment-2030661414 I observed that removing rasterization from the icon did not seem to prevent the problem.

[jonathanolson]

Added a workaround that forces a rasterization of the SVG launcher pattern (on Safari) synchronously to a Canvas pattern, so it isn't getting an embedded SVG-image inside SVG case (where the pattern seems to fail).

[jonathanolson]

Let me know if this workaround works for people!

[samreid]

@matthew-blackman and I had difficulty reproducing the problem again, even before the fix from @jonathanolson. I'll create a dev test for @Nancy-Salpepi to check a built version before RC.1.

[samreid]

Deployed: https://phet-dev.colorado.edu/html/projectile-data-lab/1.0.0-dev.23/phet/projectile-data-lab_all_phet.html Deployed: https://phet-dev.colorado.edu/html/projectile-data-lab/1.0.0-dev.23/phet-io/

[samreid]

I tested the link above on macOS Safari, and saw this result after loading once with no query parameters:

https://phet-dev.colorado.edu/html/projectile-data-lab/1.0.0-dev.23/phet/projectile-data-lab_all_phet.html?autoGenerateData=true&stringTest=a

Do you think there is something odd in the SVG itself? Should we try exporting it a different way? Should we try a PNG instead of SVG? @jonathanolson what do you recommend?

[samreid]

@jonathanolson suggested trying PNG to see if it works around the problem for now.

[matthew-blackman]

@samreid and I made progress tracking down the source of this bug. It only affects the two svg files that are using the <pattern> tag. This tag is added to the file when Illustrator exports a 'pattern' image type.

It looks like Safari may not have liked the following part of the last 2 launcher svgs: <pattern id="StarsYellow" x="0" y="0" width="75" height="75" patternTransform="translate(-10715.89 23009.05) rotate(45) scale(2.97)" patternUnits="userSpaceOnUse" viewBox="0 0 75 75">

The commit updates those 2 svgs to avoid using the pattern tag, and instead using all vector paths. @Nancy-Salpepi @samreid can you see if this fixes the problem?

[samreid]

Everything looks good here (testing on unbuilt). We should also test on a build one.

[samreid]

I tested a local built version, and everything seems good. Closing.