[bug] Mac apps seem to have dark border/shadow when `"decorations": false`

[schickling]

Describe the bug

Problem explainer/demo videos:

https://share.cleanshot.com/Jbmcs2

https://share.cleanshot.com/IZPV9L

Reproduction

https://github.com/schickling-test/2022-may-tauri-repro

Expected behavior

No response

Platform and versions

> tauri "info"

Environment
  › OS: Mac OS 12.3.1 X64
  › Node.js: 16.13.1
  › npm: 8.1.2
  › pnpm: Not installed!
  › yarn: 1.22.17
  › rustup: 1.24.3
  › rustc: 1.58.1
  › cargo: 1.58.0
  › Rust toolchain: stable-aarch64-apple-darwin 

Packages
  › @tauri-apps/cli [NPM]: 1.0.0-rc.13
  › @tauri-apps/api [NPM]: 1.0.0-rc.6
  › tauri [RUST]: 1.0.0-rc.14,
  › tauri-build [RUST]: 1.0.0-rc.12,
  › tao [RUST]: 0.9.1,
  › wry [RUST]: 0.17.0,

App
  › build-type: bundle
  › CSP: unset
  › distDir: ../dist
  › devPath: ../dist

App directory structure
  ├─ dist
  ├─ node_modules
  ├─ src-tauri
  └─ .git

### Stack trace

_No response_

### Additional context

_No response_

[FabianLars]

Someone on discord reported a similar problem which made me look into it real quick again (because i thought it'd be a different issue), and it seems to be similar to the problem fixed here https://github.com/alacritty/alacritty/pull/4600. The fix itself looks easy on its own but integrating it into tao/wry seems to be quite tricky

[amrbashir]

Seems like we need to do the same in tauri's event loop instead of inside tao/wry

[jimmieW]

Yesterday I reported https://github.com/tauri-apps/tauri/issues/5494. I understand you probably have lots of other things to work on but does anybody plan to attack this issue in the near future?

According to the linked issue (https://github.com/alacritty/alacritty/pull/4600) tauri seems to be missing an API for calling invalidateShadow(..). Possibly it could be done behind the scenes, possibly it could be exposed to the user as part of the tauri::Window API.

Or maybe one could do something like this in the even loop:

        #[cfg(target_os = "macos")]
        unsafe {
        let () = msg_send![webview_window.ns_window(), invalidateShadow];
        }

I am still new to both tauri and Rust so any pointers would be very appreciated.

[jimmieW]

I managed to get rid of my shadow artifacts by doing the following:

                #[cfg(target_os = "macos")]
                unsafe {
                    use cocoa::base::id;
                    use raw_window_handle::{HasRawWindowHandle, RawWindowHandle};
                    let raw_window = match webview_window.raw_window_handle() {
                        RawWindowHandle::AppKit(handle) => handle.ns_window as id,
                        _ => return,
                    };
                    let () = msg_send![raw_window, invalidateShadow];
                }

[amrbashir]

@jimmieW thanks, this should be added in tauri directly, could you open a PR? this needs to be done here https://github.com/tauri-apps/tauri/blob/dev/core/tauri-runtime-wry/src/lib.rs#L2810 in react to Resized and Moved events

[FabianLars]

The problem is that Resized/Moved is not enough for all use cases. https://github.com/tauri-apps/tauri/issues/5241 for example wouldn't be fixed and indeed needs a manual api for this (can't think of something to automatically handle that)

[amrbashir]

right, so we do our best internally to call this on Resized and Moved events an also add an API for users to call when needed.

[Hacksore]

So I have this same issue and I came up with a simple hack to invalidate the shadows. I call this when something changes on the react DOM or I switch routes and it seems to work fine.

import { LogicalSize, appWindow } from "@tauri-apps/api/window";

// HACK: this fixes https://github.com/tauri-apps/tauri/issues/4243
export const invalidateWindowShadows = async () => {
  const oldSize = await appWindow.outerSize();
  const newSize = new LogicalSize(oldSize.width, oldSize.height + 1);
  await appWindow.setSize(newSize);
  await appWindow.setSize(oldSize);
};

The Bug:

[Hacksore]

Commenting an update with an even better solution, disable shadows with a custom window implementation!

https://github.com/Hacksore/overlayed/blob/master/apps/desktop/src-tauri/src/window_custom.rs#L39-L43