WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

QDialog: Scrolled sticky elements disappear in Firefox after opening Dialog #18183

@w0pp

Description

@w0pp

What happened?

The sticky element disappears, and re-appears after closing the dialog

actual_firefox.mp4

What did you expect to happen?

The sticky element is still displayed in the background (like it does in Chrome)

expected_chrome.mp4

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-u77zfjcv?file=src%2Flayouts%2FMainLayout.vue

How to reproduce?

Steps to reproduce:

  1. Place a sticky element in the application
  2. Make application scrollable
  3. Open the application in Firefox
  4. Scroll to the bottom
  5. Open a dialog

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Firefox

Quasar info output

Operating System - Linux(5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36) - linux/x64
NodeJs - 20.19.1

Global packages
  NPM - 10.8.2
  yarn - 1.22.19
  pnpm - 8.15.6
  bun - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.17.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.4.0 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.17.0 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.24 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.6.3
  pinia - Not installed
  vite - 7.2.4 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.39.1 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.25.12 -- The cross-platform WebAssembly binary for esbuild, a JavaScript bundler.
  typescript - Not installed
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - quasarframeworkstackblitztempl-ei3x
  en0 - 192.168.1.104

Relevant log output

Additional context

This happens because q-body--prevent-scroll sets position: fixed. One possible solution would be to not change the position, but just change overflow to hidden, and set padding-right to scrollbar width, to avoid layout shift when opening/closing dialog on a scrollable page. Bootstrap modal uses this solution.

OS: Windows 11

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions