search

phetsims / gravity-and-orbits

"Gravity And Orbits" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
12 stars 6 forks source link

Artifacts seen when using some locales in Safari #435

Closed Nancy-Salpepi closed 2 years ago

Nancy-Salpepi commented 2 years ago

Test device MacBook Air m1 chip

Operating System macOS 12.5.1

Browser Safari 15.6.1

Problem description For https://github.com/phetsims/qa/issues/830, with some locales artifacts can be seen as the text moves around the screen. This occurs in all scenes, but only on the right side of the orbit.

This was not reproducible with Chrome.

Steps to reproduce

  1. Go to the To Scale Screen
  2. Change locale to Georgian (other examples: locale above Georgian, magyar)
  3. Check the Mass checkbox
  4. Press play

Visuals

Screen Shot 2022-08-26 at 10 58 32 AM
Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Gravity and Orbits‬ URL: https://phet-dev.colorado.edu/html/gravity-and-orbits/1.6.0-dev.3/phet/gravity-and-orbits_all_phet.html Version: 1.6.0-dev.3 2022-08-23 23:55:17 UTC Features missing: touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15 Language: en-US Window: 1322x704 Pixel Ratio: 2/1 WebGL: WebGL 1.0 GLSL: WebGL GLSL ES 1.0 (1.0) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}
Nancy-Salpepi commented 2 years ago

This is with the locale Marathi:

Screen Shot 2022-08-26 at 11 38 52 AM
Nancy-Salpepi commented 2 years ago

In Safari, artifacts are seen with 17 different locales. The * indicates the artifacts are severe.

magyar Georgian Marathi Oriya Slovenščina Turkmen Urdu Yoruba Bosnian Dansk *Gujarati Hausa hrvatski Igbo

Screen Shot 2022-08-26 at 10 54 10 AM Screen Shot 2022-08-26 at 12 13 47 PM Screen Shot 2022-08-26 at 12 14 30 PM
samreid commented 2 years ago

This problem is likely due to incorrect font bounds, @jonathanolson can you please advise? @kathy-phet can you please help prioritize?

kathy-phet commented 2 years ago

Curious if @jonathanolson feels like it is addressable, easily or not.

@Nancy-Salpepi - Does it occur when you launch the current published version in that same language? That is, is this issue unique to this new feature or just more discoverable by QA now? Thx.

Nancy-Salpepi commented 2 years ago

@kathy-phet this does occur in the current published version as well. I tried 4 from the list and they all showed the issue.

zepumph commented 2 years ago

We can experiment with anti-artifact rectangles over in https://github.com/phetsims/gravity-and-orbits/blob/a1ec2c39eb3a29df12465fc5a085e2e7ee70ecde/js/common/view/BodyNode.ts#L182-L184

perhaps with a bigger dilate?

@samreid was definitely feeling like it would be good if @jonathanolson could mention if there was a better, less work-aroundy solution here, even if we can't get to it for this release.

jonathanolson commented 2 years ago

I believe those anti-artifact rectangles are probably the best approach we have to trick browsers into handling these cases correctly.

samreid commented 2 years ago

I was able to reproduce the problem, and added an anti-artifact rectangle around the text to correct it. It seems OK locally. @Nancy-Salpepi can you please test on phettest?

Nancy-Salpepi commented 2 years ago

@samreid things look good on master as well!

samreid commented 2 years ago

Thanks, I think this issue can be closed.