Backdrop does not transition out

[linusrogge]

When closing the Popup, the Backdrop disappears instantly with no transition. I have done everything as in the examples from the website.

Additionally, in Safari the snappy options also opens in a little too snappy, making it skip a few frames.

I am using tailwind and I was using it on the Backdrop too, but just to be sure that it doesn’t interfere with motion, I changed it to the inline style property.

"use client"

import { Cambio } from "cambio"
import Image from "next/image"

export default function Lightbox({
  src,
  alt,
  caption
} : {
  src: string
  alt: string
  caption?: string
}) {
  return (
    <>
      <Cambio.Root dismissible motion="snappy">
        <Cambio.Trigger className="cursor-zoom-in rounded overflow-hidden aspect-[1920/1440] md:w-[calc(100%+120px)] md:max-w-[120%] -translate-x-[60px] shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_2px_2px_0_rgba(0,0,0,0.04)]">
          <Image
            src={src}
            alt={alt}
            width={1920}
            height={1080}
          />
        </Cambio.Trigger>
        <Cambio.Portal>
          <Cambio.Backdrop style={{
            position: "fixed",
            left: 0,
            top: 0,
            width: "100dvw",
            height: "100dvh",
            backgroundColor: "oklch(0 0 0 / 40%)"
          }} />
          <Cambio.Popup className="w-[90%] md:w-[60%] rounded overflow-hidden aspect-[1920/1440]">
            <Image
              src={src}
              alt={alt}
              width={1920}
              height={1080}
            />
          </Cambio.Popup>
        </Cambio.Portal>
      </Cambio.Root>

      <figcaption>{caption}</figcaption>
    </>
  )
}

Screen.Recording.2025-11-04.at.23.01.36.mov