You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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:
Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
Components (quasar)
Platforms/Browsers
Firefox
Quasar info output
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