Using -webkit-... to create custom text color creates border in Safari

Safari seems to have a bug that when you use webkit-background-... to give text some gradient it sometimes creates a really thin border.

It's really hard to reproduce this error consistently. The problem doesn't occur on each screen size or resolution. Adding/removing a paragraph on a random place on the page sometimes solves the issue (no logic),... Especially on Safari for iOS this problem occurs.

But this is the code I am using:

<span id="text">text.</span>

#text {
    font-size: 8em;
    font-weight: 700;
    letter-spacing: 1px;
    color: #000000;
    text-decoration: none;
    display: block;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #09D380, #0EC7D4 50%, #a4a4a4 50%);
    background-size: 200% 100%;
}

This code is supposed to give the text inside the span a customized background, in this case a gradient. And that works fine. On it's own this code also does not have this issue.

The problem occurs when mixing it on a page with more content:

<!DOCTYPE html>
<html>
    <head>
        <title>Safari bug</title>
        <link rel="icon" type="image/png" href="favicon.png">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&amp;display=swap" rel="stylesheet">

        <style>
            body {
                font-family: Poppins, sans-serif;
                width: 100%;
                height: 100%;
                padding: 0;
                background: linear-gradient(90deg, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 50%)
            }
            #container {
                position: absolute;
                top: 50%;
                left: 0;
                transform: translate(0, -50%);
                width: 100%;
            }
            #inner-container {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                justify-content: flex-start;
                width: 90%;
            }

            #under-construction-half {
                position: relative;
                text-align: center;
            }
            #under-construction-half img {
                width: 60%;
                margin-right: 10px;
            }

            #logo-and-slogan-half {
                text-align: left;
                box-sizing: border-box;
                margin-left: 50px;
            }

            #logo {
                font-size: 8em;
                font-weight: 700;
                letter-spacing: 1px;
                color: #000000;
                text-decoration: none;
                display: block;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-image: linear-gradient(to right, #09D380, #0EC7D4 50%, #a4a4a4 50%);
                background-size: 200% 100%;
            }
            #slogan {
                font-size: 3.5em;
                margin-top: -10%;
                color: #3B3B3A;
            }

            #text {
                margin-left: 7.5%;
                margin-top: 7%;
                font-size: 1.5em;
            }
            #under-construction-title {
                font-weight: 700;
                color: #09DD80;
                font-size: 1.3em;
            }

            span {
                display: block;
            }

            @media screen and (max-width: 950px) {
                #inner-container {
                    flex-direction: column;
                    margin: auto;
                }

                #logo-and-slogan-half {
                    margin-left: 0;
                    font-size: 60%;
                }
                #text {
                    width: 90%;
                    margin: auto;
                    font-size: 100%;
                    margin-top: 20%;
                }
                #under-construction-half {
                    text-align: left;
                }
                #under-construction-half img {
                    width: 50%;
                }
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="inner-container">
                <div id="logo-and-slogan-half">
                    <div id="logo-and-slogan">
                        <span id="logo">text.</span>
                    </div>
                </div>
            </div>

            <div id="text">
                <span id="under-construction-title">title...</span>
                <p id="under-construction-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
    </body>
</html>

Demo page.

Adding a border to the span with the same color as the background of the page also solves the issue. But this is not always possible due to having for example an image as background.

I am already tweaking and fiddling with this HTML/CSS code to resolve the issue, but I can't find a solution for this bug.