react-parallax-tilt

react-parallax-tilt copied to clipboard

Description

I will admit I am not positive this is a bug. I may be using the library wrong, or messing up the DOM/css in some way. Either way, I would love some assistance to get this working.

For my project, I am trying to create a tilting card very similar to the samples in storybook. However my cards will be using a <Link><Image /></Link> setup (from Nextjs). I also want a parallax badge floating in the corner. If I have the parallax badge enabled, the Link/a element becomes unclickable despite the cursor changing as when hovering over a link.

I built a minimal reproduction. It isn't super minimal, but it was the best I could do.

In my reproduction, the top tilter is the one showing the bug. The bottom one has transform-style-3d class removed. That is a utility class from a tailwind plugin that generates 3d transformation classes.

Link to Reproduction

CodeSandbox reproduction

Steps to reproduce

Create a tilting element with parallax where the first level of the parallax stack is supposed to be interactive.

Expected behavior

The tag should be clickable

Code snippets

// Broken
<Tilt className="transform-style-3d w-64" perspective={500}>
          <div className="absolute z-20 bg-gray aspect-square transform perspective-200 translate-z-5">Sample badge</div>
          <div className="relative aspect-square cursor-pointer overflow-hidden rounded-3xl">
            <Link href="https://google.com">
              <Image
                src="https://www.google.com/logos/doodles/2024/paris-games-sailing-6753651837110529-la202124.gif"
                alt="Audiobook cover image"
                fill={true}
              />
            </Link>
          </div>
        </Tilt>

// Working
        <Tilt className="w-64" perspective={500}>
          <div className="absolute z-20 bg-gray aspect-square transform perspective-200 translate-z-5">Sample badge</div>
          <div className="relative aspect-square cursor-pointer overflow-hidden rounded-3xl">
            <Link href="https://google.com">
              <Image
                src="https://www.google.com/logos/doodles/2024/paris-games-sailing-6753651837110529-la202124.gif"
                alt="Audiobook cover image"
                fill={true}
              />
            </Link>
          </div>
        </Tilt>

React Parallax Tilt Version

1.7.234

Browser

Arc (chromium based)

Operating System

• [X] macOS
• [ ] Windows
• [ ] Linux

Additional Information

Thanks in advance for any assistance!