search

phetsims / collision-lab

"Collision Lab" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
6 stars 4 forks source link

Text displaying issues #177

Closed DevonQui closed 3 years ago

DevonQui commented 3 years ago

Test device MacBook Pro

Operating System Catalina 10.15.1

Browser Safari

Problem description This is for https://github.com/phetsims/QA/issues/562 When doing the stringTest = double query parameter for Collision Lab, the initial kinetic energy is displayed a bit strangely (it is laid on top of itself). However, it does go away once more energy is added to the system. In addition to this, there are some inconsistencies for the Mass and Momentum labels under More Data in all sections of the simulation.

Steps to reproduce

  1. Open up the simulation
  2. Put ?stringTest=double at the end of the URL
  3. Click play on the simulation
  4. Click on Kinetic Energy box to the right-hand side
  5. Look at the display for Kinetic Energy
  6. Next, click on More Data at the bottom of the screen and look at the size inconsistencies for Mass and Momentum labels

Visuals

Screen Shot 2020-10-15 at 1 42 31 PM Screen Shot 2020-10-15 at 1 45 06 PM

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Collision Lab‬ URL: https://phet-dev.colorado.edu/html/collision-lab/1.1.0-dev.10/phet/collision-lab_all_phet.html?legendsOfLearning Version: 1.1.0-dev.10 2020-10-15 01:57:00 UTC Features missing: touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Safari/605.1.15 Language: en-US Window: 1440x812 Pixel Ratio: 2/1 WebGL: WebGL 1.0 GLSL: WebGL GLSL ES 1.0 (1.20) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 15 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 16) Max viewport: 8192x8192 OES_texture_float: true Dependencies JSON: {}

KatieWoe commented 3 years ago

I believe I have seen this issue in other sims before. Having trouble finding them at the moment, will link when found. Edit: still haven't found it. Sorry. Let me know if I can help though.

jonathanolson commented 3 years ago

This looks quite interesting... I'm reproducing it ONLY with the built version of the sim (in Safari).

jonathanolson commented 3 years ago

The following hacked HTML fragment shows the bug:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <svg width="1645" height="660">
    <g transform="matrix(0.98320234242564330529,0.00000000000000000000,0.00000000000000000000,0.98320234242564330529,319.10040067807062769134,0.00000000000000000000)">
      <g transform="matrix(0.50802386653789677329,0.00000000000000000000,0.00000000000000000000,0.50802386653789677329,60.00000000000000000000,300.38697791948351323299)" style="">
        <g transform="translate(8.00000000000000000000,16.48437500000000000000)">
          <text dominant-baseline="alphabetic" text-rendering="geometricPrecision" xml:space="preserve" direction="ltr" font-family="Arial, sans-serif" font-size="15.5px" font-style="normal" font-weight="normal" font-stretch="normal" lengthAdjust="spacingAndGlyphs" textLength="574.5234375" style="fill: black; stroke: none;stroke-miterlimit: 10;">‪‪Kinetic Energy‬:‪Kinetic Energy‬ = 0.65 ‪J‬:‪J‬‬:‪‪Kinetic Energy‬:‪Kinetic Energy‬ = 0.65 ‪J‬:‪J‬‬</text>
        </g>
      </g>
    </g>
  </svg>
</body>
</html>
KatieWoe commented 3 years ago

Still never found those old issues. Sorry.

jonathanolson commented 3 years ago

No worries! This definitely seems like a browser issue that's concerning. @ariel-phet there's a chance this may be popping up in other places in Safari (but sounds like it's only so far present when stringTest=double, there's no technical reason for it to be excluded just to that case).

Current minimal HTML to reproduce this:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <svg width="1645" height="660">
    <g transform="translate(8,16)">
      <text>‪‪Kinetic Energy‬:‪Kinetic Energy‬ = 0.65 ‪J‬:‪J‬‬:‪‪Kinetic Energy‬:‪Kinetic Energy‬ = 0.65 ‪J‬:‪J‬‬</text>
    </g>
  </svg>
</body>
</html>

image

jonathanolson commented 3 years ago

This definitely looks related to the directional embedding marks (for LTR/RTL):

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <svg width="1645" height="660">
    <g transform="translate(8,16)">
      <text>‪‪A‬:‪B‬ = C ‪D‬:‪E‬‬:‪‪F‬:‪G‬ = H ‪I‬:‪J‬‬</text>
    </g>
  </svg>
</body>
</html>

image

image

jonathanolson commented 3 years ago

I've added a Safari workaround above (which could have potential effects for any SVG text in Safari).

https://phet-dev.colorado.edu/html/collision-lab/1.1.0-dev.12/phet/collision-lab_en_phet.html?stringTest=double was deployed with the patch, can you verify that this doesn't happen with that version?

KatieWoe commented 3 years ago

This does look fixed in the version you linked to. On Mac 10.15.7 Safari 14.0.

liammulh commented 3 years ago

Similar to https://github.com/phetsims/resistance-in-a-wire/issues/173?

KatieWoe commented 3 years ago

Thank you @muedli!

jonathanolson commented 3 years ago

@KatieWoe and @ariel-phet, does this seem like it would be worth testing or a maintenance release for anything else (or to patch into other sims?) Otherwise it's ready to close here.

KatieWoe commented 3 years ago

If I recall correctly it didn't actually hurt the translated sims, so unless I'm missing something, a maintenance release probably isn't needed and this can be a fix for future releases, but I'll leave it up to @ariel-phet for the final call.

ariel-phet commented 3 years ago

Definitely no maintenance release necessary. Closing