Breaks when using or wrapping in an anchor element

[ivoilic]

Applying a squircle fill to an <a> or wrapping another element in one results in nothing appearing

[kschiffer]

This is a real make-or-break matter. Does anyone have any insight why this happens?

EDIT: This is a security feature. More info here: https://stackoverflow.com/questions/68094490/paintworklet-isnt-working-inside-anchor-tag

[pedroalmeida415]

My workaround is to wrap the actual squircle in a div, position it absolute to not interfere with the actual content and make it have full width and height:

<!-- 
hard set parent z-index so squircle don't end up beneath other content
 -->
<div className='z-0 relative size-20'>
<!-- 
Set the z-index to negative so it isn't on top of the actual content
 -->
  <div className='squircle absolute left-0 top-0 -z-10 h-full w-full'></div>
  <a className='h-full w-full' href='mailto:###'>
    <!-- Your link content -->
  </a>
</div>