Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
hgl opened this issue Jul 7, 2022 · 13 comments
Open

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

hgl opened this issue Jul 7, 2022 · 13 comments
Labels
platform: macOS status: help wanted type: bug

Comments

@hgl
Copy link

hgl commented Jul 7, 2022

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
Copy link
Author

hgl commented Jul 8, 2022

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:

window-vibrancy/src/macos.rs

Line 111 in f38bc23

let _: () = msg_send![ns_view, addSubview: blurred_view positioned: NSWindowOrderingMode::NSWindowBelow relativeTo: 0];

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
Copy link
Member

can you try applying the effect in the Ready event

@hgl
Copy link
Author

hgl commented Jul 10, 2022 •
edited
Loading

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
Copy link

gradddev commented Jul 11, 2022 •
edited
Loading

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
Copy link
Member

@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
Copy link

gradddev commented Jul 11, 2022 •
edited
Loading

@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
Copy link
Member

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

@FabianLars
Copy link
Member

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
Copy link
Member

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

@hgl
Copy link
Author

hgl commented Jul 12, 2022

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.

@amrbashir amrbashir reopened this Jul 12, 2022
@iujlaki
Copy link

iujlaki commented Mar 16, 2023

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
Copy link
Contributor

VojGin commented Dec 8, 2023

@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 VojGin mentioned this issue Dec 8, 2023
Merged
@VojGin
Copy link
Contributor

VojGin commented Dec 8, 2023

Edited the readme instructions mentioning these additional steps. #116

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
platform: macOS status: help wanted type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@iujlaki @gradddev @VojGin @hgl @lorenzolewis @FabianLars @amrbashir