fix: show checkerboard behind transparent images in before/after slider

The processed image in the BeforeAfterSlider was layered on top of the
original with a semi-transparent background. When the processed result
had transparency (e.g. after remove-background), the original image
showed through, making it look like the background was not removed.

Added an opaque checkerboard background behind the processed image so
transparent areas are clearly visible instead of showing the original.
This commit is contained in:
Siddharth Kumar Sah
2026-03-28 18:34:22 +08:00
parent aa1f87fc91
commit 2e29501ae6
@@ -106,9 +106,14 @@ export function BeforeAfterSlider({
{/* After image (clipped, top layer) */}
<div
className="absolute inset-0 bg-muted/30"
className="absolute inset-0"
style={{
clipPath: `inset(0 0 0 ${position}%)`,
backgroundImage:
"linear-gradient(45deg, #d1d5db 25%, transparent 25%), linear-gradient(-45deg, #d1d5db 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d1d5db 75%), linear-gradient(-45deg, transparent 75%, #d1d5db 75%)",
backgroundSize: "16px 16px",
backgroundPosition: "0 0, 0 8px, 8px -8px, -8px 0",
backgroundColor: "#f9fafb",
}}
>
<img