Background-blend-mode set to screen does not work on mobile

Question

So I'm new to coding and found out recently that you can apply linear-gradient to text. I did it using background linear gradient and the background-blend-mode like so:

#header h1 {
    text-align: center;
    font-size: 5rem;
    font-weight: 900;
    font-style: italic;
    letter-spacing: .5rem;
    line-height: 1.7;
    text-transform: uppercase;
    color: #886434; /* FALLBACK COLOR */
    background: linear-gradient(limegreen, transparent), linear-gradient(90deg, skyblue, transparent), linear-gradient(-90deg, coral, transparent);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-blend-mode: screen;
}

and it looks really cool on desktop, but when I deployed the web page via GitHub pages and opened it on my phone in Safari the background-blend-mode is not working. I also tried using Chrome for iOS, but got the same result.

Here is the link to Github pages and here is the link to the entire repository.

I would really appreciate it if someone enlightens me on the subject as I couldn't find anything online that explains it, thanks!