tauri: [bug] Visual bugs while resizing windows
Describe the bug
Resizing the window causes strange visual bugs. Some of these happen on electron too.
Here are a few examples:
https://user-images.githubusercontent.com/6969415/166095615-35693867-2a11-4340-baec-4ea636303207.mp4
https://user-images.githubusercontent.com/6969415/166095635-d3df7769-7d8a-44f4-9759-f26ad9989a8f.mp4
Reproduction
Create an application, and resize the window. You can try our specific application out here: https://github.com/Futurabeast/slimevr-ui/tree/fb3057b80ae5246e408b341227c37568bb819c60
Expected behavior
Window should resize normally
Platform and versions
We observe the same problems on both machines we tested on:
> slimevr-ui@0.1.0 tauri
> tauri "info"
Environment
› OS: Windows 10.0.19043 X64
› Webview2: 100.0.1185.50
› MSVC:
- Visual Studio Community 2019
› Node.js: 16.15.0
› npm: 8.5.5
› pnpm: Not installed!
› yarn: Not installed!
› rustup: 1.24.3
› rustc: 1.60.0
› cargo: 1.60.0
› Rust toolchain: stable-x86_64-pc-windows-msvc
Packages
› @tauri-apps/cli [NPM]: 1.0.0-rc.7(outdated, latest: 1.0.0-rc.9)
› @tauri-apps/api [NPM]: 1.0.0-rc.3(outdated, latest: 1.0.0-rc.4)
› tauri [RUST]: 1.0.0-rc.6,
› tauri-build [RUST]: 1.0.0-rc.5,
› tao [RUST]: 0.7.0,
› wry [RUST]: 0.14.0,
App
› build-type: bundle
› CSP: unset
› distDir: ../build
› devPath: http://localhost:3000/
› framework: React
› bundler: Webpack
App directory structure
├─ .git
├─ .vscode
├─ config
├─ docs
├─ node_modules
├─ public
├─ scripts
├─ src
├─ src-tauri
└─ target
and the below one is the gif shown, but its actually on windows 11 not windows 10. Not sure why it reports windows 10.
> slimevr-ui@0.1.0 tauri
> tauri "info"
Environment
› OS: Windows 10.0.22000 X64
› Webview2: 101.0.1210.32
› MSVC:
- Visual Studio Build Tools 2017
- Visual Studio Build Tools 2019
- Visual Studio Community 2019
- Visual Studio Community 2017
› Node.js: 16.13.0
› npm: 8.1.3
› pnpm: Not installed!
› yarn: 1.22.17
› rustup: 1.24.3
› rustc: 1.59.0
› cargo: 1.59.0
› Rust toolchain: stable-x86_64-pc-windows-msvc
Packages
› @tauri-apps/cli [NPM]: 1.0.0-rc.7(outdated, latest: 1.0.0-rc.9)
› @tauri-apps/api [NPM]: 1.0.0-rc.3(outdated, latest: 1.0.0-rc.4)
› tauri [RUST]: 1.0.0-rc.6,
› tauri-build [RUST]: 1.0.0-rc.5,
› tao [RUST]: 0.7.0,
› wry [RUST]: 0.14.0,
App
› build-type: bundle
› CSP: unset
› distDir: ../build
› devPath: http://localhost:3000/
› framework: React
› bundler: Webpack
App directory structure
├─ .git
├─ .vscode
├─ build
├─ config
├─ docs
├─ node_modules
├─ public
├─ scripts
├─ src
├─ src-tauri
└─ target
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 17 (5 by maintainers)
This seems to be a common problem😭. If you use chromium kernel browsers, they will have this problem when they change size, including edge and chrome. Not only that, I have tried many frameworks that also have this problem, such as QT quick, electron and compose desktop.
Hard to tell if there is a difference:
https://user-images.githubusercontent.com/6969415/222079625-df55b053-e878-418c-9f41-1089cea044d9.mp4
Hmm, the difference for decorated windows was much bigger than this from what i’ve seen so far. i never checked undecorated windows tbh.
Could you try
std::time::Duration::from_millis(1)(millis instead of nanos) just to double check?I am afraid we can’t do anything about this, it is out of our control. Whenever the window is resized, we tell the webview to resize too, the resizing part is done by the webview itself and as I mentioned earlier this is a common issue with Chromium and inherently Webview2.
If you want, you can open a bug report at https://github.com/MicrosoftEdge/WebView2Feedback.