Splash screen loading bar border is not symmetrical

[phet-steele]

The left side of the loading bar is just ever so slightly thinner than the right side:

Seen on macOS 10.12.3 Chrome. For phetsims/tasks/issues/764.

[samreid]

This appears to be an svg aliasing problem.

[samreid]

Upon closer inspection, it seems like the left side is getting clipped, perhaps the svg bounding box isn't wide enough to account for the stroke width.

[jonathanolson]

Explicit width/height (and ideally namespace xmlns='http://www.w3.org/2000/svg') in the SVG element itself may fix this. Viewbox could also be used, but is more complicated.

[samreid]

I have replicated the problem in http://www.colorado.edu/physics/phet/dev/html/faradays-law/1.3.7-dev.3/faradays-law_en.html

[samreid]

Joist, brand and chipper have branches "splash-script" for this.

[samreid]

Those branches are too stale to work with master.

[samreid]

I merged master to the branches without any hassle. Here is the div as shown in the chrome dev tools:

[samreid]

Putting x at 1 instead of 0 seems to solve the problem:

Is it still aligned, or should I subtract off some width?

[samreid]

Here are guides that show how bad the alignment is:

it would be good to clean that up.

[samreid]

Proposed fix in http://www.colorado.edu/physics/phet/dev/html/energy-skate-park-basics/1.3.1-dev.3/energy-skate-park-basics_en.html

[phet-steele]

This is what I see, and it looks fine to moi:

Closing.