Text styled with gradient is cut off

[Florian Wolf]

const GradientSpan = styled.span`
   background-image:linear-gradient(60deg, #d23c69, #ffc850);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
`;

<TextLoop>
    <GradientSpan>this g is cut below1</GradientSpan>
    <GradientSpan>this g is cut below2</GradientSpan>
</TextLoop>

The gradient style applied to these spans via styled-components is cut at the bottom. That means, whenever characters are reaching down, the text will be cut of at the buttom when a gradient is set. Without setting the gradient, making it plain color text, it displays correctly.

Setting mask to false doesn't fix that.

[Bernardo Raposo]

Hi @flo-wolf thanks for opening the issue!

I've created a sandbox to see what you're talking about but I don't think I fully understand what your issue is. Can you please have a look and let me know what's wrong here? https://codesandbox.io/s/react-text-loop-playground-spj3k

Thanks!

[Bernardo Raposo]

@flo-wolf I'm going to close this issue due to inactivity but let me know if this is still happening and you have a sandbox to reproduce it.

[Florian Wolf]

@flo-wolf I'm going to close this issue due to inactivity but let me know if this is still happening and you have a sandbox to reproduce it.

Weird, I can't seem to reproduce it either. The problem vanished in my project, probably some conflict with other styling elements on my end. Thank's for your effort trying to resolve it though, I really apprechiate this kind of support :)