Gredeint border and text is not working on Safari and IPhone devices

• I have the color of text and border-bottom in gradient color and not working as expected on:

• Safari (Desktop)

• iPhone (Safari)

Screenshots:

1. This is how it looks on Chrome web

2. This is how it looks on Safari (Desktop)

3. This is how it looks on IPhone 12 Safari

CSS code written with styled components:

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};
`;

Any help / comment / advice is welcome :)