therungg/therun-frontend

Fix Patreon's gradient names showing up as a block sometimes

therungg opened this issue · 2 comments

For patreon's names, the name sometimes shows up as a solid gradient block. No idea why. Can't reproduce reliably, but usually the patron page will display it in light mode. See the patron page in light mode to (sometimes) reproduce. Also happens in the patreon news bar above the footer.

image

zoglo commented

Quick look into the dev-tools and you can see the issue:
image

It looks like it sometimes drops the "background-clip" property when it's being compiled into the background shorthand.

This can be fixed by using backgroundImage instead of background in these 2 lines:

background: `-webkit-linear-gradient(left, ${darkModeString})`,

background: `-webkit-linear-gradient(left, ${lightModeString})`,

style: [
    {
        backgroundImage: `-webkit-linear-gradient(left, ${darkModeString})`,
        WebkitBackgroundClip: "text",
        backgroundClip: "text",
        color: "transparent",
        WebkitTextFillColor: "transparent",
    },
    {
        backgroundImage: `-webkit-linear-gradient(left, ${lightModeString})`,
        WebkitBackgroundClip: "text",
        backgroundClip: "text",
        color: "transparent",
        WebkitTextFillColor: "transparent",
    },
],

image

image

Merged, thanks!