[Bug] [ProgressRing] ProgressRing sometimes renders blank on Safari

[saperdadsk]

Note: Tricky bug I'm not able to reproduce consistently in a clean environment, so don't have a specific repro case other than ATEAM-33688, though I'm able to repro inconsistently in other contexts.

Observed behavior: When rendering a ProgressRing component (size 'l', indeterminate) on Safari, sometimes the Progress Ring is not visible at all. Sometimes it is visible, but appears slimmer than usual.

Expected:

Observed (when it's visible at all)

Investigation:

• Observed that the final Polygon in the component is sized bigger than it should be in Devtools (should be small, but instead covers all other polygons), covering other polygons. Modifying any property of the container div (e.g. setting display to block and back to flex) causes the polygon to resize and the progress ring to render correctly.
• Removing all other Polygons in the component did not change this incorrect sizing behavior.
• Creating an identical div/svg/polygon element in the same location I used the ProgressRing component (same styling) showed the correct sizing.
• Investigating the ProgressRing code, I saw that we play an animation when the component is created: https://github.com/Autodesk/hig/blob/development/packages/progress-ring/src/presenters/stylesheet.js#L129, which causes the mask polygon to shrink from the full size of the svg to the actual path.
• It appears that if the animation css property is removed from the element before the animation finishes rendering (it's removed as soon as we go from "entering" to "entered"), safari will stop the animation midway through.
• Changing the Enter timeout at https://github.com/Autodesk/hig/blob/development/packages/progress-ring/src/behaviors/ProgressRingIndeterminateBehavior.js#L140 from 650 to 1000 (without changing the animation length in stylesheet) causes the issue to disappear

Notes:

• We're using CSSTransition, but don't appear to follow the guidelines from the docs on how to animate based on that (using css classes it provides), so this could potentially be related?
• I noticed that the length of the react renders in my repro took ~20ms each - I wouldn't expect that to matter, but I'm investigating if speeding that up helps

System information:
Safari version: Version 14.0.3 (16610.4.3.1.7)
OS: Mac OS 11.2.3 (20D91)