In case anyone finds this looking for a solution, here's a couple things I ended up figuring out, partly based on the responses linked above:
It seems to make some difference whether the SVG element has a viewbox attribute, and whether the SVG element itself has sizes set on it via CSS. In the CodePen example above, it works in Safari if I remove the viewBox and set width & height of the SVG both to 100% in CSS. In my own project, this sometimes made a difference and sometimes not, depending on what else I adjusted. Not quite sure of the particulars but worth it to play around with if you are dealing with this issue!
The trick described here of adding a 1px <rect> into the <clipPath> element almost worked. It did work in the CodePen example I set up. In my own project, this made the issues better but still didn't really solve it. I'm clipping both images and text etc in that project, and sometimes the images have to be transformed/scaled as well, so maybe there was just too much going on for this trick to be effective.
Adding an onUpdate function to force re-rendering on update, as described here, totally works. For performance reasons it's obviously not my favorite solution, but after hours of pulling my hair out over this I'm happy with it!