渐变边框和文本在Safari和iPhone设备上不起作用

• 我有渐变颜色的文本和边框底部的颜色，但没有按预期工作：

• Safari（桌面）

• iPhone (Safari)

截图：

1. 这是它在 Chrome 网页上的外观

2. 这是它在 Safari（桌面）上的外观

3. 这是它在 iPhone 12 Safari 上的外观

使用样式组件编写的 CSS 代码：

export const Tabs = styled.ul`
    display: flex;
    width: 100%;
    margin-top: 2em;
`;

export const Tab = styled.li`
    display: flex;
    ${fontStyles[fontSizes.eighteen]};
    border-bottom: 3px solid transparent;
    background-image: linear-gradient(rgba(0, 145, 148, 1), rgba(72, 71, 112, 1)),
        ${colors.gradientGreen};
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px ${colors.offWhite} inset;
    cursor: pointer;
    outline: none;
`;

export const Span = styled.span`
    font-weight: 800;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-image-source: ${colors.gradient};
    background-image: ${colors.gradientGreen};
`;

欢迎任何帮助/评论/建议:)