therungg / therun-frontend

Frontend for therun.gg
https://therun-fr-therun.vercel.app
MIT License
26 stars 8 forks source link

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

Closed therungg closed 1 year ago

therungg commented 1 year ago

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 1 year ago

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: https://github.com/therungg/therun-frontend/blob/b0e2e39bbd2618f295661025b9bc0f898359e3b6/components/patreon/patreon-styles.ts#L56 https://github.com/therungg/therun-frontend/blob/b0e2e39bbd2618f295661025b9bc0f898359e3b6/components/patreon/patreon-styles.ts#L63

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

therungg commented 1 year ago

Merged, thanks!