search

PavelLaptev / css-houdini-squircle

A tiny CSS Houdini module that allows to add a squircle shape to HTML elements
https://pavellaptev.github.io/squircle-houdini-css/
MIT License
356 stars 13 forks source link

Squircles fail in links #4

Closed wooorm closed 2 years ago

wooorm commented 2 years ago

To reproduce:

  1. Go to: https://codepen.io/PavelLaptev/pen/OJWgRWG
  2. Wrap one of them in an <a> (no href) — it still works
  3. add a href="#" or so — it fails

I’m guessing that this has to do with paintWorklet and privacy concerns? https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet

But maybe the worklet crashes on something unexpected due to privacy boundaries, which can be fixed?

wooorm commented 2 years ago

Hmm, guess this is just impossible to get around as Chrome blocks it. Might be good to document somewhere at least?

PavelLaptev commented 2 years ago

@wooorm there is a hack. You need to wrap a link <a> within a <div> with the squircle property check this out https://codepen.io/PavelLaptev/pen/wvgNXox