inline element with background-clip: text; in Safari

It is wired in Safari browser using background-clip: text; to realize the gradient color text of inline element( fig. 1 ). When changing the display to inline-block or block it seems ok, but I prefer an inline effect.

enter image description here

I'm wondering how can I realize the same visual effect just as the Chrome shows( fig. 2 )

enter image description here

Here are the code, any help would be appreciated :)

import React from 'react';

import './demo.css'

const Demo = () => {
    return (
        <div className="container">
            <div className="text">When the rain is blowing in your face and the whole world is on your case, <span className="highlight">I could offer you a warm embrace to make you feel my love. </span>To make you feel my love.
            </div>
        </div>
    );
}

export default Demo;

/* demo.css */
.container {
    width: 200px;
    margin: 20px;
    border: 1px solid red;
}

.text {
    font-size: 16px;
}

.highlight {
    font-weight: bold;
    background-image: linear-gradient(30deg, red, blue);
    background-clip: text;
    color: transparent;
}