CSS: pb webkit sur chrome...

Bonjour,
J'ai un problème d'affichage de mon code CSS sur chrome voila je veux que:
- l'image en background soit détouré sur le titre du site
- et je veux que l'image soit blender avec du rouge.
Sur Safari les deux marchent avec mon code. Mais sur chrome, je n'ai réussi que la première étape.

Avec chrome:
https://drive.google.com/file/d/1LvUeAsi0JO_nMynbJ3whRuGmCb7a8tU_/view?usp=sharing
avec safari:
https://drive.google.com/file/d/1GjUo0QIynNQYKSzi9BWko-KgzQZv2Mbk/view?usp=sharing

Je vous mets également mon code CSS concernant le titre h1:
[code]
h1
{
background-color: red;
background-image: url("/Users/williampetrini/Desktop/Site/Ressources/bark.jpg");
background-blend-mode: darken;
text-align: center;
font-size: 90px;
font-family: "Press Start 2p", serif;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
margin: 4em 4em 2.5em 4em;
}
[code]

Merci !