safariだとbackground-clipを設定したテキストの一部が表示されない

前提・実現したいこと

金色のグラデーションが施されたテキストがあります。

デモ(CodeSandBox)

上記のデモは問題ないのですが実際に稼働させているコードで、iPhoneとSafariで開くとテキストの一部が下記のように欠けます。

あいうえおか
きくけこさ

たちつてと

「さ」だけが見えていて、「しすせそ」が見えない状態です。
「しすせそ」があるべき場所は、黒い背景が見えています。
AndroidでChromeだと問題ありませんでした。

テキストが欠けることなく表示させたいです。

問題が発生しているコードを提供できないため、直接の解決策のほか、原因となっていそうなことを挙げていただいたり、参考になりそうな記事やページなどを教えていただきたいです。

発生している問題・エラーメッセージ

金色の文字が欠けます。

該当のソースコード

html
1<body>
2  <div>
3    <p>
4      あいうえおかきくけこ<strong>さしすせそ</strong>たちつてと
5    </p>
6  </div>
7</body>

css
1body {
2  background-color: black;
3  color: white;
4}
5
6div {
7  width: 100px;
8}
9
10strong {
11  font-size: 1.4em;
12  color: transparent;
13  background: repeating-linear-gradient(
14    0deg,
15    #b67b03 0.1em,
16    #daaf08 0.2em,
17    #fee9a0 0.3em,
18    #daaf08 0.4em,
19    #b67b03 0.5em
20  );
21  -webkit-background-clip: text;
22}