[bug] Visual bugs while resizing windows

[TheButlah]

Describe the bug

Resizing the window causes strange visual bugs. Some of these happen on electron too.

Here are a few examples:

2022-04-30_02-49-33.mp4

2022-04-30_02-44-32.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:

> [email protected] 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.

> [email protected] 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

[bgtor]

I can confirm this bug in MacOS 11.5 also. Just a HelloWorld Vuetify app (I'm kinda looking for an electron alternative).

Edit: The bug in MacOS seems to be only with vertical and diagonal resizing.

Screen.Recording.2022-04-30.at.19.19.12.mp4

[lucasfernog]

@bgtor can you share the output of yarn tauri info? I can't reproduce that one.

[bgtor]

@lucasfernog Sure

Environment
› OS: Mac OS 11.5.0 X64
› 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-apple-darwin

Packages
› @tauri-apps/cli [NPM]: 1.0.0-rc.9
› @tauri-apps/api [NPM]: 1.0.0-rc.4
› tauri [RUST]: 1.0.0-rc.8,
› tauri-build [RUST]: 1.0.0-rc.7,
› tao [RUST]: 0.8.3,
› wry [RUST]: 0.15.1,

App
› build-type: bundle
› CSP: unset
› distDir: ../dist
› devPath: http://localhost:8080/
› framework: Vue.js (Vue CLI)
› bundler: Webpack

App directory structure
├─ node_modules
├─ public
├─ src-tauri
├─ dist_electron
├─ .git
├─ .idea
└─ src

[TheButlah]

Is there any workaround for this?

[XiaoXianThis]

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.

[TheButlah]

Can confirm, some of these (or all of these?) happen in electron apps too.

[Pyroglyph]

This does seem to be a Chromium issue, as I've personally experienced this issue with a number of Chromium-based browsers for a few years at least.
It does seem to be particularly bad with Tauri apps though. I've made a test app and I'm getting about the same resize performance as TheButlah despite having very little on the page.

Oddly enough, this project appears to perform resizing much better than any other Tauri app, Electron app, or Chromium-based browser I've ever seen. At least on my machine (Windows 11 build 22000). Can anyone confirm this?
I should add that in that project the issue is still there (because Chromium), but it's much less noticable.

[amrbashir]

Closing as this is an issue in chromium itself and inherently Webview2.

[metkm]

@Pyroglyph I tried that app and It really works way better than other apps that use chromium. Do you have any idea how they did it now?

[Pyroglyph]

@Pyroglyph I tried that app and It really works way better than other apps that use chromium. Do you have any idea how they did it now?

I did a little bit of experimenting a while ago and found that including the menu bar at the top seems to alleviate this issue for some reason. It's not completely gone, but it's noticeably better.
I would test this further on my Linux machine but I've yet to get Tauri working properly on it (some issues with gdk-3.0 and fixesproto, whatever they are).

[metkm]

@Pyroglyph You are actually right the with menu It really works way better. Thanks!

@amrbashir Hey, I wonder if this issue can be opened again as adding a menu makes the resizing way better. Is this really related to webview? Here is a small comparision

With Menu

2022-08-24.17-15-41.mp4

Without Menu

2022-08-24.17-16-25.mp4

[amrbashir]

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.

[Djaymare]

Hello ! It seems related to this issue : Nasty visual artefacts on resize

But we can't change the background color for now since #1564

[amrbashir]

For whatever reason, putting the thread to sleep while resizing seems to improve the resizing behavior on Windows see #6322

you can test using this example

 tauri::Builder::default()
        .on_window_event(|e| {
            if let WindowEvent::Resized(_) = e.event() {
                std::thread::sleep(std::time::Duration::from_nanos(1));
            }
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");

[TheButlah]

For whatever reason, putting the thread to sleep while resizing seems to improve the resizing behavior on Windows see #6322

you can test using this example

 tauri::Builder::default()
        .on_window_event(|e| {
            if let WindowEvent::Resized(_) = e.event() {
                std::thread::sleep(std::time::Duration::from_nanos(1));
            }
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");

here is a demo of this suggested change. The left is with the sleep, the right is without.

2023-03-01.02-44-14.mp4

Its not a perfect fix, but definitely an improvement.

[FabianLars]

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?

[TheButlah]

Could you try std::time::Duration::from_millis(1) (millis instead of nanos) just to double check?

Hard to tell if there is a difference:

2023-03-01.03-02-03.mp4