[bug] No hardware acceleration for canvas and css

[LIMPIX31]

Describe the bug

Using css filters and canvas increases CPU load instead of using GPU while Chorme and Mozilla do very well with 3D graphics on canvas and smooth css animations.

I understand that this may be related directly to WebView2 on my system, but I would like other users to notice this problem as well.

Reproduction

As I said earlier, it may depend on the system. Just try using canvas or css filters in the animation and watch the frame time in the profiler.

Expected behavior

The GPU is expected to be used for canvas and css, for example.

Platform and versions

Environment

• OS: Windows 10.0.19044 X64
• Webview2: 104.0.1293.47
• MSVC:
  • Visual Studio Build Tools 2017
  • Visual Studio Community�2019
• Node.js: 16.15.1
• npm: 8.13.2
• pnpm: 7.8.0
• yarn: 1.23.0-20220130.1630
• rustup: 1.24.3
• rustc: 1.62.0
• cargo: 1.62.0
• Rust toolchain: stable-x86_64-pc-windows-msvc

Packages

• @tauri-apps/cli [NPM]: 1.0.4
• @tauri-apps/api [NPM]: 1.0.2
• tauri [RUST]: 1.0.2,
• tauri-build [RUST]: 1.0.2,
• tao [RUST]: 0.12.1,
• wry [RUST]: 0.19.0,

App

• build-type: bundle
• CSP: unset
• distDir: ../dist
• devPath: http://localhost:3000/
• framework: React

App directory structure

├─ .git ├─ .idea ├─ .tauri ├─ dist ├─ node_modules ├─ src └─ src-tauri

Stack trace

No response

Additional context

I want to please users with a smooth interface. It would be very frustrating if the problem is in my computer and I have nothing to do but change the hardware. As I wrote, Chrome does a pretty good job with acceleration.

[FabianLars]

Can you try the same in Edge too? By default they should behave the same (even more than chrome + webview2)

Also, what kind of GPU do you have? chrome and edge should have the same gpu blacklist i think, but anyway.

Also, if you have the time and energy, would you mind creating a minimal reproduction repo, so we're all on the same page with that, and can test it more easily? (especially other users)

[nothingismagick]

I found this: https://github.com/MicrosoftEdge/WebView2Feedback/issues/1469

[LIMPIX31]

Can you try the same in Edge too? By default they should behave the same (even more than chrome + webview2)

Also, what kind of GPU do you have? chrome and edge should have the same gpu blacklist i think, but anyway.

Also, if you have the time and energy, would you mind creating a minimal reproduction repo, so we're all on the same page with that, and can test it more easily? (especially other users)

Right about the GPU, I run Chrome with --ignore-gpu-blocklist

[LIMPIX31]

I think --ignore-gpu-blocklist should help. However, how do I add it?

I'll prepare a reproduction repo if that doesn't work.

[FabianLars]

The easiest way (and maybe only way, since the with_webview method probably triggers to late to inject these flags 🤔) to try that flag is via the WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS environment var.

[LIMPIX31]

The easiest way (and maybe only way, since the with_webview method probably triggers to late to inject these flags 🤔) to try that flag is via the WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS environment var.

Where to set this variable. And how will it work in production?

[FabianLars]

Well for a temporary dev check you'd just set it in the terminal, for powershell it'd be $env:WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS="--ignore-gpu-blacklist".

For production (or for testing too i guess) you'd set that env var in rust by inserting this at the top of the main function (above the tauri builder)

std::env::set_var("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--ignore-gpu-blacklist");

[LIMPIX31]

Well for a temporary dev check you'd just set it in the terminal, for powershell it'd be $env:WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS="--ignore-gpu-blacklist".

For production (or for testing too i guess) you'd set that env var in rust by inserting this at the top of the main function (above the tauri builder)

std::env::set_var("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--ignore-gpu-blacklist");

Yes it works. Issue closed.

P.S. Please correct the message. This is a fairly common typo. --ignore-gpu-blOcklist instead of --ignore-gpu-blAcklist. I wasted a lot of time when I couldn't figure out why it didn't work in electronjs. Most issues mention this parameter with a typo. Although it may not be a typo, gpu does not work with A.

P.S.S. blocklist and blacklist are so close.

[FabianLars]

funnily enough i did a really quick google search before posting this because i thought it was blAcklist and was confused as to why you wrote blOcklist. And even after the search it looked like blacklist would be correct 😂 like it was even mentioned in somewhat official places, so i think that it was renamed in the past maybe?

Anyway, glad it's working for you!

[vdvman1]

Probably renamed for the same reason the master branch is recommended to be named main now

[Jinx-1120]

hi, i have same problem, I tried to set the environment variable, but it seems that the program still works

this is my code:

fn main() {
  std::env::set_var(
    "WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS",
    "--ignore-gpu-blocklist",
  );

  tauri::async_runtime::spawn(start_server());
  tauri::Builder::default()
    .plugin(TauriWebsocket::default())
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

Do you need other configurations? I'm a beginner of rust. Would anyone like to help me