🐛 fix: Fix Portal on Safari

This commit is contained in:
Wanjohi
2024-09-15 01:27:06 +03:00
parent 5b713521a1
commit 7663e17644
2 changed files with 4 additions and 4 deletions

View File

@@ -110,7 +110,7 @@ export const Card = component$(({ titleWidth, titleHeight, game, size, ...props
'--after-height': `${titleHeight}%`
}}
class={cn(
"w-full mx-auto h-full relative flex overflow-hidden",
"w-full rounded-xl mx-auto inset-0 h-full relative flex overflow-hidden",
"before:absolute before:inset-0 before:w-full before:animate-zoom-out before:h-full before:bg-cover before:bg-center before:bg-no-repeat before:bg-[url:var(--before-url)]",
"after:absolute after:w-[var(--after-width)] after:bg-contain after:h-[var(--after-height)] after:left-0 after:m-auto after:right-0 after:bottom-0 after:top-0 after:bg-center after:bg-no-repeat after:bg-[url:var(--title-url)]"
)} />

View File

@@ -63,9 +63,9 @@ export default component$(() => {
return (
<button class="relative rounded-full size-[100px] outline-none focus:ring-2 focus:ring-primary-500 hover:ring-2 hover:ring-primary-500 transition-all duration-200">
<canvas class="absolute w-full h-full left-0 top-0 bottom-0 right-0" height={100} width={100} ref={buttonRef} />
<canvas class="relative w-full h-full z-[5] left-0 top-0 bottom-0 right-0" height={100} width={100} ref={iconRef} />
<button class="relative inset-0 rounded-full size-[100px] outline-none focus:ring-2 focus:ring-primary-500 hover:ring-2 hover:ring-primary-500 transition-all duration-200">
<canvas class="absolute w-full h-full inset-0" height={100} width={100} ref={buttonRef} />
<canvas class="relative w-full h-full z-[5] inset-0" height={100} width={100} ref={iconRef} />
</button>
)
})