KPC
Kevin Powell - Community•3mo ago
cheesedie

Extend HTML <dialog> backdrop to iPhone safe areas.

I am trying to extend dialog backdrop to iPhone safe area but no luck so far. On the image you can see the top and bottom areas don't show the backdrop. I am using nextjs and tailwind. Code snippet: 
    <dialog
      ref={dialogRef}
      className="h-screen max-h-none w-screen max-w-none border-0 bg-transparent p-0 backdrop:bg-black/80"
      onClick={handleDialogClose}>
      <button className="absolute top-6 right-6 z-10 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-black/50 text-lg text-white transition-colors hover:text-gray-300">
        ✕
      </button>

      <div className="flex h-screen flex-col overflow-hidden">
        <div className="flex min-h-0 flex-1 items-center justify-center">
          {imageProps && (
            <Image
              placeholder="blur"
              blurDataURL={artwork.image?.asset?.metadata?.lqip ?? ''}
              onClick={(e) => e.stopPropagation()}
              src={imageProps.src}
              alt={artwork.title || ''}
              width={artwork.image?.asset?.metadata?.dimensions?.width ?? 1920}
              height={artwork.image?.asset?.metadata?.dimensions?.height ?? 1080}
              className="h-full w-auto max-w-full object-contain"
              priority
              style={{
                viewTransitionName: `artwork-${artwork._id}`,
              }}
            />
          )}
        </div>
        {/* Info overlay in dialog */}
        <div
          onClick={(e) => e.stopPropagation()}
          className="bg-black/70 p-6 text-center text-white">
          <h3 className="mb-2 text-xl">{artwork.title}</h3>
          <p className="text-lg font-light opacity-90">
            {artwork.style} • {artwork.year}
            {artwork.size ? ` • ${artwork.size}` : ''}
          </p>
        </div>
      </div>
    </dialog>
    <dialog
      ref={dialogRef}
      className="h-screen max-h-none w-screen max-w-none border-0 bg-transparent p-0 backdrop:bg-black/80"
      onClick={handleDialogClose}>
      <button className="absolute top-6 right-6 z-10 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-black/50 text-lg text-white transition-colors hover:text-gray-300">
        ✕
      </button>

      <div className="flex h-screen flex-col overflow-hidden">
        <div className="flex min-h-0 flex-1 items-center justify-center">
          {imageProps && (
            <Image
              placeholder="blur"
              blurDataURL={artwork.image?.asset?.metadata?.lqip ?? ''}
              onClick={(e) => e.stopPropagation()}
              src={imageProps.src}
              alt={artwork.title || ''}
              width={artwork.image?.asset?.metadata?.dimensions?.width ?? 1920}
              height={artwork.image?.asset?.metadata?.dimensions?.height ?? 1080}
              className="h-full w-auto max-w-full object-contain"
              priority
              style={{
                viewTransitionName: `artwork-${artwork._id}`,
              }}
            />
          )}
        </div>
        {/* Info overlay in dialog */}
        <div
          onClick={(e) => e.stopPropagation()}
          className="bg-black/70 p-6 text-center text-white">
          <h3 className="mb-2 text-xl">{artwork.title}</h3>
          <p className="text-lg font-light opacity-90">
            {artwork.style} • {artwork.year}
            {artwork.size ? ` • ${artwork.size}` : ''}
          </p>
        </div>
      </div>
    </dialog>
No description
13 Replies
cheesedie
cheesedieOP•3mo ago
Forgot to add that this appears in iOS 26
Chris Bolson
Chris Bolson•3mo ago
I haven't yet installed iOS 26 to be able to test but this could be due to how Apple calculates vh. Tailwind h-screen = height: 100vh; Have you tried using a different unit such as svh or dvh?
Kevin Powell
Kevin Powell•3mo ago
We can't control the size of the backdrop though, can you? Quick testing on my part, and I can confirm it's not working... might be something that needs a bug report filed. Oh, it's just a position fixed element, so you can control it hmm, negative inset doesnt seem to fix it though must be with how position: fixed works with the env safe areas or how they are defining the viewport for fixed elements or something... though a negative inset should work, but it doesn't 🤷 I changed it to position: absolute and inset: -1000vw and that works, but on desktop it causes overflow, lol. yeah, I just tested a bunch of ways to try and pull it into the safe areas while keeping it position: fixed and nothing works. must be related to top layer... I have another element with position fixed where a negative inset works, but the exact same declarations on the backdrop don't work
cheesedie
cheesedieOP•3mo ago
If this is a bug, where should I submit it to, webkit, safari?
ἔρως
ἔρως•3mo ago
i dont have a device to try this, but, have you tried to set the backdrop size to 100x100cm?
cheesedie
cheesedieOP•3mo ago
tried different height units but it seems like there is just no way to extend the dialog backdrop to the top & bottom safe areas
ἔρως
ἔρως•3mo ago
considering that safari got modal support a very short time ago, i get why there's these gremlins but, can you try a simple dialog in a simple html file, with no styled at all, and see if it does the same? just a file with <dialog open>hi!</dialog>
cheesedie
cheesedieOP•3mo ago
cheesedie
cheesedieOP•3mo ago
by default the backdrop has no background color, so had to add it
ἔρως
ἔρως•3mo ago
yeah, and doesnt grow past that area :/
Chris Bolson
Chris Bolson•3mo ago
From what I read it may have something to do with Safari Tabs. Have you got them set to "compact" (I believe this is the default)? Try setting to "top" or "bottom". This isn't any kind of solution, just to help identify the issue.
Kevin Powell
Kevin Powell•3mo ago
this would be a webkit bug. I haven't seen a bug filed on it yet. I'll get to it eventually.... unless someone here wants to first, lol. Someone DMed me on Bluesky about the same problem yesterday, and used the NYT site as an example. Basically, position: fixed is now mucked, and lots of big sites have issues, so I'm guessing it'll get resolved pretty quickly, lol. I can think of some workarounds for most things, but ::backdrop seems stuck no matter what. I think it's the top layer limiting it somehow. I think it's even a problem on Apples site with their menu... but you don't really notice it because they jump the page to the top when you open the menu for some reason, and on other pages where an image might peek out the bottom, they don't have the sticky header like on the homepage
Rev
Rev•2mo ago
hmm

Did you find this page helpful?