search

tauri-apps / tauri

Build smaller, faster, and more secure desktop applications with a web frontend.
https://tauri.app
Apache License 2.0
79.69k stars 2.37k forks source link

[bug] page flickers #3674

Closed JonasLang-dev closed 2 years ago

JonasLang-dev commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

If I resize the window violently: image

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 commented 2 years ago

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

decahedron1 commented 2 years ago

If I resize the window violently: image

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)

https://user-images.githubusercontent.com/61946759/158254572-f4825fa4-eed3-4a55-8a02-6ad6d184d168.mp4

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

niraj-khatiwada commented 1 month ago

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.