Overlays sometimes break Safari iOS transparency

[tnld]

Environment

• Operating System: Darwin
• Node Version: v24.5.0
• Nuxt Version: 4.2.1
• CLI Version: 3.30.0
• Nitro Version: 2.12.9
• Package Manager: bun@1.3.0
• Builder: -
• User Config: compatibilityDate, devtools, future, app, modules, $production, css, runtimeConfig, site, socialShare, ogImage, fonts, vite, scripts, typescript, i18n, icon, nitro, devServer, sentry, sourcemap
• Runtime Modules: @nuxt/ui@4.2.0, nuxt-auth-utils@0.5.25, @nuxt/image@2.0.0, @vueuse/nuxt@14.0.0, @nuxtjs/i18n@10.2.1, @pinia/nuxt@0.11.3, nuxt-authorization@0.3.5, @nuxt/scripts@0.13.0, nuxt-vitalizer@2.0.0, @stefanobartoletti/nuxt-social-share@2.2.1
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v.4.2.1

Reproduction

The chat template is a good reproduction for this:
https://github.com/nuxt-ui-templates/chat

Description

Since iOS 26, the bottom bar in Safari is transparent and the content scrolls behind it. However, this behavior sometimes breaks when using an overlay component.

Interestingly, on the Nuxt UI site itself (and some other templates) it's working fine. I haven't figured out yet what exactly causes this. I've tried adding and removing absolutely/fixed positioned elements to the bottom, but this doesn't seem to change anything.

Additional context

1. The white background spans over the whole height
2. When opening the overlay menu, Safari adds a background to the bottom bar
3. The bottom bar stays until a hard reload

Logs