fix(ripple): z-index adjusted (#2853)

* fix(ripple): z-index adjusted * fix(ripple): z-index changed
nextui-org · Apr 24, 2024 · 765c04e · 765c04e
1 parent e9fef9b
commit 765c04e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/.changeset/wicked-panthers-relax.md b/.changeset/wicked-panthers-relax.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/ripple": patch
+---
+
+Fix press event on iOS, the ripple zIndex was preventing the press event
diff --git a/packages/components/ripple/src/ripple.tsx b/packages/components/ripple/src/ripple.tsx
@@ -36,7 +36,9 @@ const Ripple: FC<RippleProps> = (props) => {
                     borderRadius: "100%",
                     transformOrigin: "center",
                     pointerEvents: "none",
-                    zIndex: 10,
+                    overflow: "hidden",
+                    inset: 0,
+                    zIndex: 0,
                     top: ripple.y,
                     left: ripple.x,
                     width: `${ripple.size}px`,

diff --git a/packages/components/ripple/src/use-ripple.ts b/packages/components/ripple/src/use-ripple.ts
@@ -24,8 +24,8 @@ export function useRipple(props: UseRippleProps = {}) {
       {
         key: getUniqueID(prevRipples.length.toString()),
         size,
-        x: event.clientX - rect.x - size / 2,
-        y: event.clientY - rect.y - size / 2,
+        x: event.clientX - rect.left - size / 2,
+        y: event.clientY - rect.top - size / 2,
       },
     ]);
   }, []);