Gradient tittle not rendering well on iOS phone

[mllamazares]

This is the beta version of my blog based on this template:
https://mllamazares.github.io/

When accessing via iOS phones it does not render the second word ("Analyst") well:

In Android phones or via browser, it's displayed as expected:

This is the code to generate that gradient:

          <h1 className="pb-2 inline font-extrabold leading-snug tracking-tight text-title text-4xl md:text-maintitle md:leading-snug">
            Hello, my name's Miguel. I'm a passionate{' '}
            <p className="inline text-transparent bg-clip-text bg-gradient-to-br from-primary-300 to-primary-700">
              {' '}
              Systems Analyst
            </p>{' '}
            based in northen Spain.
          </h1>

Here you can check the rest of the template for further context.

Any idea of what's going on here?

[timlrx]

Seems like a browser css issue. I think it would be better to open an issue on tailwind css github page and see if they have any solutions to it.

[mllamazares]

Thanks for the advice! I will.