In the provided Codepen example you can find a testcase that shows two SVG texts, placed on a path with a textPath. In (my) Safari it looks as if they have a startOffset of 0%. However the first is set at -10% and the second at 110%. Chrome and Firefox show the expected offsets. (This came up while wanting to animate in an SVG text on a path. Setting the startOffset < 0% and animating this to > 0% gave the expected results in Chrome and Firefox, but not Safari)
<rdar://problem/50112923>
Just stumbled upon the exact same bug in Safari. I built this testcase: https://felixniklas.com/bug_reports/safari-negative-startoffset/ and then realized that it's already been reported. The testcase shows the behavior with 0%, 50%, -50% and a real-world example.
I took the -50% startOffset broken Safari example from Comment 02 webpage and turned it into JSFiddle: Link - https://jsfiddle.net/6s2dgpz8/show All browsers (Chrome Canary 107, Firefox Nightly 106 and Safari Technology Preview 152) render it same and even Safari 15.6.1 as well. While for real-world example: JSFiddle Link - https://jsfiddle.net/sba96zuh/show All browsers overlap the text while animating around box, Firefox is quite slow but it is something for Firefox to fix. But since all browsers are behaving as intended, I am going to mark this as "RESOLVED CONFIGURATION CHANGED". Thanks!