Inconsistency in element position after reload.

[SpaceMoney-01011000]

Greeting and salutations!

I'm in the process of building out a pre-loader and I have this little quirk that's driving me bananas. If you look at the pen, the overall feature is fairly self-explanatory;  it's a pre-loader that transitions to a second button face that encapsulates a "continue" button.

Now, then - with that said, on the mouseover event, there's an SVG arrow that animates to the right side of its parent element; which is working as expected. However, I've noticed that on occasion, the SVG arrow (or rather its container - a span) doesn't position it self in the same spot 100%.

I've been pulling my hair out trying to understand why, and I'm about to down a fifth of Jack Daniels. I was wondering if some of you wonderful people would be gracious to my beggarly self and perhaps take a peek at it?

I've included two images to illustrate the issue to keep you from having to refresh the page to catch the error.

Kind regards,

X.

Right!

WRONG!!!

See the Pen eYbodZR?editors=0010 by scottonanski (@scottonanski) on CodePen

Edited October 12, 2023 by SpaceMoney-01011000
Poorly educated. Bad spelling.

[SpaceMoney-01011000]

Okay, I figured it out. Had to adjust some calculations.