[bug] page flickers

[JonasLang-dev]

Describe the bug

When I stretch the screen size, the page flickers。Either dev or Build。

Reproduction

1. You can check out my Cat-Family/cat-tube repo
2. cd frontend fold
3. Install devDependencies
4. You can use build or dev

Expected behavior

When you pull the edge of the screen to resize, the page will flicker

Platform and versions

$ tauri info

Operating System - Manjaro, version 21.2.4 X64

Node.js environment
  Node.js - 16.13.2
  @tauri-apps/cli - 1.0.0-rc.5
  @tauri-apps/api - Not installed

Global packages
  npm - 8.5.1
  pnpm - Not installed
  yarn - 1.22.17

Rust environment
  rustup - Not installed
  rustc - 1.59.0
  cargo - 1.59.0
  toolchain - Not installed

App directory structure
/dist
/src-tauri
/node_modules
/src

App
  tauri - 1.0.0-rc.3
  tauri-build - 1.0.0-rc.3
  tao - 0.6.3
  wry - 0.13.3
  build-type - bundle
  CSP - unset
  distDir - ../dist
  devPath - http://localhost:3000/
  framework - React

Stack trace

No response

Additional context

I don't know the reason for this problem, but it affects the user experience

[JonasKruckenberg]

When I stretch the screen size, the page flickers。Either dev or Build。

I assume you mean resizing the window? Unless you're in a VM, resizing your screen would be quite the violent activity 😉

Jokes aside, can you please provide a minimal reproduction of this issue? We're all volunteers and don't have the time to debug full blown projects.

[JonasLang-dev]

I'm sorry, I didn't describe the problem clearly. The project I built under windows has no problem, but the project after manajro build has this resizing the window problem. I am not using a VM.

[FabianLars]

afaik that's just webkit(gtk) not being good at resize handling. i don't think there is something we can do about that (other than changing the white background color so it's not as bad on the eyes: #1564)

[JonasLang-dev]

afaik that's just webkit(gtk) not being good at resize handling. i don't think there is something we can do about that (other than changing the white background color so it's not as bad on the eyes: #1564)

I see, thanks for your help

[elibroftw]

If I resize the window violently:

This issue is present in Edge or Chrome but barely and definitely not in Firefox.
Additionally, in both Tauri and Edge, maximizing the app makes the app invisible for a split second.
OS: Windows

[elibroftw]

Maximizing split second issue. I think it's easy to reproduce and so does not warrant a video showing the issue.

[decahedron1]

If I resize the window violently:

This issue is present in Edge or Chrome but barely and definitely not in Firefox. Additionally, in both Tauri and Edge, maximizing the app makes the app invisible for a split second. OS: Windows

Also having this issue when resizing a Tauri window, though maximizing doesn't give me any problems (Windows 11, build 22572)

mZ2BMwCP28.mp4

(above is VS Code, below is a blank Tauri app)

[niraj-khatiwada]

For anyone facing this issue, setting std::env::set_var("WEBKIT_DISABLE_COMPOSITING_MODE", "1"); on main.rs makes it smooth but it introduces new bug of showing whitescreen on start for a flash milliseconds.

EDIT: You can solve the whitescreen issue by setting "transparent": true to your window in tauri.conf.json.