Nuxt 3 DevTools CSS Overflow

[ghost]

Environment

Nuxt project info: 12:12:23

---

• Operating System: Windows_NT
• Node Version: v18.17.1
• Nuxt Version: 3.7.1
• CLI Version: 3.7.3
• Nitro Version: 2.6.2
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules, css
• Runtime Modules: @nuxtjs/[email protected]
• Build Modules: -

---

Reproduction

Always

Describe the bug

When enabling dev tools and setting a background makes the page overflow.

When setting scss to this:

html,
body,
#__nuxt {
  @apply w-full h-full;
}

body {
  background-image: url('/images/background.jpg');
  @apply bg-neutral-800 bg-cover bg-center backdrop-blur-sm bg-no-repeat bg-fixed;
}

It overflows the page and adds a scrollbar.

I could just disable the dev tools sure but it would be nice if it didn't affect my own styling.

Additional context

No response

Logs

No response

[arashsheyda]

@ThatOneRockyBoy applying backdrop-blur on parent(body) is breaking the child position somehow, a workaround that comes to my mind is:

body {
  background-image: url('/images/background.jpg');
  @apply bg-neutral-800 bg-cover bg-center bg-no-repeat bg-fixed;

  &::before {
    @apply content-empty inset-0 z--1 absolute backdrop-blur
  }
}

with backdrop-filter on body::before :

with backdrop-filter on body :