Issues with text rendering on Edge

[bryo5363]

Test device: Acer Aspire R13

Operating System: Windows 10 64 bit

Browser: Microsoft Edge 20.10240.16384.0

Problem description: The moles, liters and concentration strings do not load immediately

Steps to reproduce:
open sim
select a different solution
the strings will not load immediately

Severity:

Screenshots:

Troubleshooting information (do not edit):

Name: ‪Molarity‬

URL: http://www.colorado.edu/physics/phet/dev/html/molarity/1.2.0-rc.1/molarity_en.html

Version: 1.2.0-rc.1 2015-10-01 21:51:38 UTC

Features missing: touch

Flags: pointerEnabled, pixelRatioScaling

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240

Language: en-US

Window: 1280x602

Pixel Ratio: 1.5/1

WebGL: WebGL 0.95

GLSL: WebGL GLSL ES 0.95

Vendor: Microsoft (Internet Explorer)

Vertex: attribs: 16 varying: 15 uniform: 512

Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32)

Max viewport: 16384x16384

OES_texture_float: true

Dependencies JSON: {"assert":{"sha":"858e65ac","branch":"master"},"axon":{"sha":"90798ec9","branch":"master"},"babel":{"sha":"931afbf1","branch":"master"},"brand":{"sha":"f2c42d7b","branch":"master"},"chipper":{"sha":"fc81a64e","branch":"master"},"dot":{"sha":"428a9836","branch":"master"},"joist":{"sha":"4a72198b","branch":"master"},"kite":{"sha":"fe8d3c5c","branch":"master"},"molarity":{"sha":"f5c4d5b3","branch":"1.2"},"nitroglycerin":{"sha":"9d8393fa","branch":"master"},"phet-core":{"sha":"8e31808c","branch":"master"},"phetcommon":{"sha":"acbbf59b","branch":"master"},"scenery":{"sha":"317e459d","branch":"master"},"scenery-phet":{"sha":"dac159c4","branch":"master"},"sherpa":{"sha":"1759eade","branch":"master"},"sun":{"sha":"12739cd4","branch":"master"}}

[pixelzoom]

@bryo5363 Some questions, to clarify...

(1) There are no "liters" or "concentration" (lowercase) strings in the sim. Are you referring to the strings "(moles)" in the leftmost slider, "(Liters)" in the rightmost slider, and "Concentration" in the display to the right of the beaker? I find it odd that those strings would not display, since they are part of other strings.

(2) By "The moles, liters and concentration strings do not load immediately", do you mean that the strings are briefly not visible, then suddenly become visible? How long does it take for them to become visible? Do they all become visible at the same time?

(3) Is there anything printed to the browser console?

[bryo5363]

Yes the data inside of the parentheses have a delayed rendering. After
switching solutions, it takes approximately 5 seconds before they load (all
strings load at the same time). It might just be a resizing issue. I will
provide a screencast after my class
On Oct 12, 2015 11:47 AM, "Chris Malley" [email protected] wrote:

@bryo5363 https://github.com/bryo5363 Some questions, to clarify...

(1) There are no "liters" or "concentration" (lowercase) strings in the
sim. Are you referring to the strings "(moles)" in the leftmost slider,
"(Liters)" in the rightmost slider, and "Concentration" in the display to
the right of the beaker? I find it odd that those strings would not
display, since they are part of other strings.

(2) By "The moles, liters and concentration strings do not load
immediately", do you mean that the strings are briefly not visible, then
suddenly become visible? How long does it take for them to become visible?
Do they all become visible at the same time?

(3) Is there anything printed to the browser console?

—
Reply to this email directly or view it on GitHub
#24 (comment).

[pixelzoom]

@bryo5363 wrote:

Yes the data inside of the parentheses have a delayed rendering.

The word "Concentration" is not inside parentheses. Did you mean "(Molarity)" instead of "Concentration"? And is there delayed rendering of the parentheses too, or just the words inside the parentheses?

[bryo5363]

https://drive.google.com/file/d/0B7WUaZM7uvVKS1NEbEZ1R21mOEU/view?usp=sharing

Here is a screencast of the issue

[pixelzoom]

Thanks for the screencast.

Some notes:

(1) Contrary to the original report, the "Concentration" string is not affected. This affects the units labels: "moles", "Liters", "Molarity".

(2) Not only are those strings not being rendered, some parts of them are being rendered in the wrong locations. For example, at 00:05 in the screencast, note that "moles" and part of "Liters" is rendered over near the Concentration display, rear the top-right of the beaker. Here's a screenshot:

[pixelzoom]

I have no idea what the problem might be here, but it is highly likely to be a problem that affects all sims. I don't have a test system with Edge, but if I did, I have no idea how I'd go about troubleshooting this.

Assigning to @jonathanolson to see if he has any ideas. Labeling as "high priority" since this is liable to be a general issue.

[jonathanolson]

Not able to reproduce in Edge/12.9600, will try updating to a newer version.

[jonathanolson]

Reproducing in latest Edge from Win10 modern.ie VM, Edge/10240 (same as reported problem above).

It seems to be SVG specific for us (setting renderer to 'canvas' resolves it). Removing embedding marks seems to fix it for the English version, but NOT the Arabic version. Removing the SVG text parameters (e.g. text-rendering, textLength, lengthAdjust, xml:space preserve) have no effect. Most things that cause a repaint seem to fix the issue, and some operations cause it to break again (most notably, operations that add/remove SVG elements).

https://connect.microsoft.com/IE/Feedback/Details/1848037 appears to be a similar issue, and was reported on 9/29/2015.

I'll plan to add information to that bug report, and investigate more tomorrow.

[jonathanolson]

Submitted comment, which has a few additional details about potential workarounds (one that works for English for NOW, but doesn't work for RTL locales).

[jonathanolson]

Looks like there are some other reports for the same issue:
https://connect.microsoft.com/IE/Feedback/Details/1571965
https://connect.microsoft.com/IE/feedback/details/1567173

The first report of problems was about 2.5 months ago.

It looks like the bug occurs on group transforms. I'll look into possibly adding another operation on groups when they are transformed, to see if we can trick the browser into working.

Otherwise, my recommendation is to set the default Edge renderer to Canvas. Its appearance looked fine (and thankfully image/text rendering on Edge has always looked good, unlike some other browsers), so performance would be my main concern.

[pixelzoom]

Otherwise, my recommendation is to set the default Edge renderer to Canvas.

Would that default be set by the sim, or by scenery?

[jonathanolson]

Otherwise, my recommendation is to set the default Edge renderer to Canvas.

Would that default be set by the sim, or by scenery?

Presumably in Joist we would set the default to 'svg' if it's Edge, but Scenery might also prevent Text as rendering in SVG in Edge.

[jonathanolson]

One workaround someone did on something static was to update CSS colors for the text after changes.

[jonathanolson]

Updating CSS/styles/visual parameters after transform updates doesn't seem to help. Additionally using textPath with a straight line doesn't seem to help.

[jonathanolson]

Tested Canvas renderer on Edge on actual hardware. No observable difference in performance for Molarity, and a few other spot-tests didn't reveal significant performance differences. Visually, there was a slight bias towards more antialiasing (slightly fuzzier lines) on shapes and text, but it is hardly noticeable, and I'd say definitely acceptable.

I've committed this workaround (using Canvas for Edge), as it's my only current solution.

[jonathanolson]

@ariel-phet, how to proceed?

[ariel-phet]

@jonathanolson using Canvas for edge seems like a reasonable current solution.

[ariel-phet]

Did you need more comment than that?

[jonathanolson]

Did you need more comment than that?

Nope. I'm closing the issue, as the workaround was already committed. @pixelzoom, I'd recommend for the next RC that full testing be done for Edge/Win10.