Doesn't support rounded edges (or other glare props) about react-parallax-tilt

[LucidNinja]

Actually, that can be fixed by adding the -webkit-mask-image property, as referenced here: https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b

[mkosir]

Hey @LucidNinja, thanks for the PR, it looks great, I already merged it and created new release 1.5.0 🚀

[LucidNinja]

Actually, even if I add the following:

.glare-wrapper {
  border-radius: 3rem;
}

There seems to be a bug in Safari both on desktop and iOS that causes square corners to show momentarily, before disappearing. Not sure why this is? I'll have a look into it further to see if a CSS bug?

[mkosir]

Hi @LucidNinja thanks for the detailed bug report and provided possible solution(s) 🚀
As you mentioned this can be added as css prop to .glare-wrapper class, but I would prefer the second option you proposed, passing it as a GlareBorderRadius prop?
I think if we add the prop to styleGlareWrapper object in /src/features/glare/Glare.ts it should work.
Would you like to take a stab at this and create PR?

[LucidNinja]

Ok I can give it a go!

[LucidNinja]

Hey @mkosir - adding the GlareBorderRadius prop to the styleGlareWrapper would have required me to change the constructor (from what I can see), so I created a private method inside Glare.tx and ran it during the render method. Not sure if that's the best way to tackle it, but it works. Let me know if you have any feedback. See #28