I have this code that creates h1 element in JS.
When I resize the window, I want to reset the properties from text gradient, and then add the gradient them when window is bigger than 800px. I am calling this function every time window resizes.
While this works perfectly in Chrome, in Safari the background property resets -webkit-background-clip = text to border-box, removing the gradient text effect. I see the whole box filled with gradient, and it is not clipped to the text.
Does anybody know how to fix this?
Thanks!
<body></body>
<script>
let h1 = document.createElement("h1");
h1.style.fontSize = "7rem";
h1.style.fontFamily = "Arial";
let t = document.createTextNode("Hello");
h1.appendChild(t);
document.body.appendChild(h1);
const resize = () => {
h1.style['-webkit-text-fill-color'] = '';
h1.style.background = '';
h1.style['-webkit-background-clip'] = 'text';
if (window.innerWidth > 800) {
h1.style['-webkit-text-fill-color'] = 'transparent';
h1.style.background = "linear-gradient(to left, #3498db, #1abc9c)";
h1.style['-webkit-background-clip'] = 'text';
}
}
window.addEventListener("resize", resize);
</script>