search

tauri-apps / window-vibrancy

Make your windows vibrant.
Apache License 2.0
623 stars 32 forks source link

No web content is displayed when vibrancy is applied. #48

Open hgl opened 2 years ago

hgl commented 2 years ago

When I apply this plugin in macOS 10.13.6, I got an empty window with vibrancy applied:

Screen Shot 2022-07-07 at 4 32 12 PM

If I remove the setup code, the content is correctly displayed:

Screen Shot 2022-07-07 at 4 31 38 PM

I created the project with npm create tauri-app, and used the svelte framework. Any idea how to fix it?

My configs:

src-tauri/src/main.rs

#![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
)]

use tauri::Manager;
use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial};

fn main() {
    let context = tauri::generate_context!();
    tauri::Builder::default()
        .menu(if cfg!(target_os = "macos") {
            tauri::Menu::os_default(&context.package_info().name)
        } else {
            tauri::Menu::default()
        })
        .setup(|app| {
            let window = app.get_window("main").unwrap();

            #[cfg(target_os = "macos")]
            apply_vibrancy(&window, NSVisualEffectMaterial::Sidebar)
                .expect("Unsupported platform! 'apply_vibrancy' is only supported on macOS");

            Ok(())
        })
        .run(context)
        .expect("error while running tauri application");
}

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Welcome to Tauri!</title>
  </head>
  <style>
    html,
    body {
      background: transparent;
    }
  </style>

  <body>
    <h1>Welcome to Tauri!</h1>
  </body>
</html>

src-tauri/Cargo.toml

[package]
name = "app"
version = "0.1.0"
description = "A Tauri App"
authors = ["you"]
license = ""
repository = ""
default-run = "app"
edition = "2021"
rust-version = "1.57"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[build-dependencies]
tauri-build = { version = "1.0.2", features = [] }

[dependencies]
serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] }
tauri = { version = "1.0.2", features = ["api-all"] }
window-vibrancy = "0.1.3"

[features]
# by default Tauri runs in production mode
# when `tauri dev` runs it is executed with `cargo run --no-default-features` if `devPath` is an URL
default = [ "custom-protocol" ]
# this feature is used used for production builds where `devPath` points to the filesystem
# DO NOT remove this
custom-protocol = [ "tauri/custom-protocol" ]
hgl commented 2 years ago

I did some experiments:

Given the empty window, if I drag the mouse through where the heading should be and right click, the menu prompts me to search for the text. Screen Shot 2022-07-08 at 9 33 55 AM

If I remove this line, then the content is correctly displayed, but without vibrancy:

https://github.com/tauri-apps/window-vibrancy/blob/f38bc23e5e3c7af1ed22b1f48464c2dd3b853365/src/macos.rs#L111

It seems the issue stems from the vibrancy view covering the webkit view.

I wonder if the latest version of tauri, or its creation of the webkit view for macOS 10.13.6 is special, which causes this plugin to add the subview first?

amrbashir commented 2 years ago

can you try applying the effect in the Ready event

hgl commented 2 years ago

I tried this, same result:

fn main() {
    let context = tauri::generate_context!();
    tauri::Builder::default()
        .menu(if cfg!(target_os = "macos") {
            tauri::Menu::os_default(&context.package_info().name)
        } else {
            tauri::Menu::default()
        })
        .build(context)
        .expect("error while running tauri application")
        .run(|app_handle, event| match event {
            tauri::RunEvent::Ready {} => {
                let window = app_handle.get_window("main").unwrap();

                #[cfg(target_os = "macos")]
                apply_vibrancy(&window, NSVisualEffectMaterial::Sidebar)
                    .expect("Unsupported platform! 'apply_vibrancy' is only supported on macOS");
            }
            _ => {}
        });
}
gradddev commented 2 years ago

I have the same issue I think. The WebView background is white. Even if I set it to transparent using CSS. Also I see a vibrancy for a split second when the window is showing.

FabianLars commented 2 years ago

@alexgraddev if you're on macos: Did you enable the private apis? It's necessary for transparency, see: https://tauri.app/v1/api/config#tauriconfig.macosprivateapi

gradddev commented 2 years ago

@FabianLars, didn't know about it. Now it works. Thank you!

P.S. I think it should be in the window-vibrancy documentation, or at least in the example for the Tauri.

lorenzolewis commented 2 years ago

Is there a way it can check that and output a message to console if it isn't enabled?

FabianLars commented 2 years ago

Yes that would be possible, but imo it should be enough that every transparency api doc mentions it, right?

p.s. i guess adding it to the readme/example here is fair tho? idk

amrbashir commented 2 years ago

I think the api doc for transparent is enough. This plugin shouldn't care how you enable transparency for your window.

hgl commented 2 years ago

I don't think I'm experiencing the same issue as @alexgraddev did.

I have set tauri.macOSPrivateApi to true in src-tauri/tauri.conf.json, same result, and I don't see any white background of web view or vibrancy window for a split second. The vibrancy window always covers everything.

iujlaki commented 1 year ago

I don't think I'm experiencing the same issue as @alexgraddev did.

I have set tauri.macOSPrivateApi to true in src-tauri/tauri.conf.json, same result, and I don't see any white background of web view or vibrancy window for a split second. The vibrancy window always covers everything.

I had the same, just added this line to tauri.conf.json and it works now: https://github.com/tauri-apps/window-vibrancy/blob/dev/examples/tauri/src-tauri/tauri.conf.json#L57

VojGin commented 9 months ago

@alexgraddev if you're on macos: Did you enable the private apis? It's necessary for transparency, see: https://tauri.app/v1/api/config#tauriconfig.macosprivateapi

I enabled macOSPrivateApi, set "transparent": true and it works now. https://github.com/tauri-apps/window-vibrancy/blob/dev/examples/tauri/src-tauri/tauri.conf.json#L57

VojGin commented 9 months ago

Edited the readme instructions mentioning these additional steps. https://github.com/tauri-apps/window-vibrancy/pull/116