Backdrop does not cover full viewport height on iPhone iOS 26 Safari

[theGeorg]

Describe the bug

On iOS 26, the semi-transparent backdrop in fancyBox does not extend to the very top and bottom of the screen. Instead, it stops below the status bar and above the input/navigation bar.

Expected behavior:
The backdrop should extend to cover the full viewport height, including under the status bar and down to the bottom safe area, providing a fully immersive lightbox experience.

Actual behavior:
The backdrop leaves visible gaps at the top and bottom of the screen, which looks visually broken.

Reproduction

1.	Open any fancyBox gallery on iPhone iOS 26 Safari. e.g. [https://fancyapps.com/fancybox/](https://fancyapps.com/fancybox/)
2.	Tap on an image to open fancyBox.
3.	Observe that the semi-transparent dark backdrop does not cover the full viewport height — the area behind the iOS status bar and the bottom safe area remains visible.

Additional context

No response

[fancyapps]

Hi,

Thanks for the reporting, I've already been looking for a solution but haven't found one yet. Unfortunately, Apple has simply broken modal dialogs, as they now clip any fixed positioned element. See https://developer.apple.com/forums/thread/800798 https://x.com/uwukko/status/1969677833720004987 and other bug reports related to iOS 26 Safari.

[fancyapps]

Interestingly, this even affects Apple's website:

[theGeorg]

Thanks for looking into this so quickly!
It’s reassuring to know that this is already on your radar – even if it’s frustrating to see that Apple’s own pages are affected as well.
Hopefully Apple will address this soon or we will find a reliable workaround in the future.
Really appreciate your effort and transparency here!

[msev]

This is a global issue reported to Apple, and a fix is in progress.

https://bugs.webkit.org/show_bug.cgi?id=297182
WebKit/WebKit#49187

[fancyapps]

So, it seems that Safari now clips fixed elements to the "inner" viewport (even with a negative position), meaning the backdrop won't extend behind the status bar or address bar.

Now, there are two options - wait for Apple to fix it, or make a breaking changes by changing the layout - if the content could remain fixed position, then the backdrop element would have to be absolutely positioned and stretched to the size of the entire page. It would be like going back to the old days when Safari didn't support fixed position at all.

Neither option is great, as Apple is well known for ignoring issues (been waiting for over a decade for them to solve the page scrolling issue). bugs.webkit.org has been down for the second day, so I don't know what the status of the bug report is and whether it's worth waiting.

The third option would be to use the backdrop color the same as the page background color and hide the entire page content when Fancybox opens. This would also solve the problem with page scrolling. This is what amazon.com does, for example. But this option is also not great, it is unrealistic to require that the content of every web page be in a specific wrapping element.

[fancyapps]

The good news is that after upgrading to iOS 26.1 Beta 1, the issue with position: fixed elements has been fixed. The bad news is that the area behind the navigation bar is coloring strangely, it seems to be painted separately and opacity is ignored.

[cassiomolin]

After upgrading to iOS 26, I noticed this exact same issue in the mobile menu of a website I'm currently working on. Then I noticed Fancybox is also being affected and I started looking for a possible workaround until we have a solution in place.

I honestly have to test this further, especially in older versions, but it seems to be working on iOS 26 (for now, at least, who knows what Apple can break next).

Fancybox.bind("[data-fancybox]", {
  on: {
    init: (fancybox) => {

      // Detect iOS
      const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

      if (isIOS) {
        // Store original body styles for restoration
        fancybox.originalBodyPosition = document.body.style.position || '';
        fancybox.originalBodyWidth = document.body.style.width || '';
        fancybox.originalBodyTop = document.body.style.top || '';
        fancybox.savedScrollY = window.scrollY;

        // Apply position fixed to prevent scroll issues
        document.body.style.position = 'fixed';
        document.body.style.width = '100%';
        document.body.style.top = `-${fancybox.savedScrollY}px`;
      }
    },

    destroy: (fancybox) => {

      const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

      if (isIOS) {
        // Restore original body styles and scroll position
        document.body.style.position = fancybox.originalBodyPosition || '';
        document.body.style.width = fancybox.originalBodyWidth || '';
        document.body.style.top = fancybox.originalBodyTop || '';
        if (fancybox.savedScrollY !== undefined) {
          window.scrollTo(0, fancybox.savedScrollY);
        }
      }
    }
  }
});

This, however, has the same issue @fancyapps mentioned in the previous comment:

the area behind the navigation bar is coloring strangely, it seems to be painted separately and opacity is ignored.