SVG temporary artifacts (cleared by repaint)

• Component: SVG
• Status: NEW ---

[Jonathan Olson]

Created attachment 463564 [details]
Shows the buggy artifact case, and that it's related to the red stroke of the trapezoid

Overview: Visual artifacts (horizontal lines) appear randomly during animations, but are cleared by forcing a repaint.

Steps to reproduce (listed in https://github.com/phetsims/geometric-optics-basics/issues/31, with a video):

(I apologize, I don't have a minimum producible example, this uses a build of our code)

1. Load https://phet-dev.colorado.edu/html/geometric-optics-basics/1.2.0-dev.3/phet/geometric-optics-basics_all_phet.html?screens=1
2. Select "Light" on the upper-left combo box
3. Move the light (lamp) up and down so that the rays are entirely off the screen and then back on the screen, until artifacts appear

Actual Results: <attached example>, artifacts matching the stroke color of the right trapezoid appear as horizontal lines. They disappear when things move over them

Expected Results: No artifacts appearing.

Build Date & Hardware:

macOS 13.0.1
Version 16.1 (18614.2.9.1.12)

Additional information:

Shows up as an extension of the following SVG path:
<path d="M -42 -112 L 42 -134 L 42 134 L -42 112 L -42 -112 Z  M0 0" style="fill: rgb(255,255,255); stroke: red;stroke-width: 2;stroke-miterlimit: 10;"></path>

We're adding a workaround that force-repaints all of our SVG content every frame in Safari to work around this.

Tracking in https://github.com/phetsims/geometric-optics-basics/issues/31.

[Alexey Proskuryakov]

The website looks different from the screenshot - the marginal lines are black, and the screen has no red border.

I couldn't get this to reproduce with macOS 13.1 beta.

[Radar WebKit Bug Importer]

<rdar://problem/102636067>