Can't see cursor when the text has gradient effect

[0xtomoon]

Cursor is invisible when the text has gradient effect

Code to reproduce:

import { css } from '@panda/css'
import { TypeAnimation } from 'react-type-animation';

<TypeAnimation
  className={css({
    textStyle: 'bold.48',
    textGradient: 'linear-gradient(119deg, #0855ED 23.5%, #CD5890 69.1%)'',
  })}
  sequence={[
    'by A',
    1000,
    'by B',
    1000,
  ]}
  speed={50}
  repeat={Infinity}
/>

[maxeth]

The cursor is styled based on the css color property. Your gradient styling may not work as expected since textGradient actually applies background-image.

But since any text has to have some default color, the cursor should at least be visible. If it's not visible at all, it's is probably being cut-off by the background-image or something.

You'd have to set cursor={false} and find a custom css solution for this (if there is any, haven't tried this yet).

Maybe something with z-index?

 .custom-cursor-animation::after {
      content: '|';
      position: relative;
      z-index: 5;
      animation: cursor 1.1s infinite step-start;
    }

      @keyframes cursor {
        50% {
          opacity: 0;
        }
      }

If you find a solution, you will have to apply the custom css class to the component as described here

[0xtomoon]

Thanks. I tried custom css but still invisible. Looks like the problem in parent css, will check in my side :pray: