search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
26k stars 3.54k forks source link

Flickering screen when resizing window #17122

Open DarkLite1 opened 7 months ago

DarkLite1 commented 7 months ago

What happened?

The screen starts to flicker at the moment you try to resize the window until you just see the scrollbar appear/disappear.

What did you expect to happen?

No flickering

Reproduction URL

https://codesandbox.io/p/github/DarkLite1/test/main?import=true

How to reproduce?

  1. Go to CodeSandbox
  2. Let the code run
  3. Right click the preview window and select "Close and open in a browser tab"
  4. Close the Typescript error message
  5. In the newly opened preview go to page "Help"
  6. Now resize the window up and down until you just see the scrollbar appear, notice flickering of the screen

It's not clear in the picture below, but at the point the scrollbar is displayed the screen starts to flicker: image

Flavour

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

Areas

Components (quasar), SPA Mode

Platforms/Browsers

Chrome, Microsoft Edge

Quasar info output

Operating System - Windows_NT(10.0.20348) - win32/x64
NodeJs - 20.11.1

Global packages
  NPM - 10.5.2
  yarn - Not installed
  @quasar/cli - 2.4.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.15.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.8.0 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.23 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.3.0
  pinia - Not installed
  vuex - Not installed
  vite - 2.9.18 -- Native-ESM powered web dev build tool
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

It seems to be related to #5932 but when we try the suggested solution it doesn't work.

lxmfly123 commented 1 month ago

I noticed when I resize the window, quasar add hide-scrollbar class to body, witch actually set body scrollbar-width: none. Sadly, it does not work, the scrollbar still flickers. Then I set body overflow: hidden, this time it works.

This is very interesting, I never noticed a flickering scrollbar in my quasar project for the past few years, and it's obvious that the quasar wants to restrain the flickering but it just not works.