Rendering bug? when using transparent NSWindow with SwiftUI for MacOS app - macos

Question

I was developing a macOS app using SwiftUI (latest version from XCode 14.1) with the following App setup
import SwiftUI
#main
struct DemoApp: App {
#NSApplicationDelegateAdaptor(AppDelegate.self) private var appDelegate
var body: some Scene {
Window("demo", id: "demo") {
ContentView()
}.windowStyle(.hiddenTitleBar)
}
}
class AppDelegate: NSObject, NSApplicationDelegate, ObservableObject {
#Published var active: Bool = true
var mainWindow: NSWindow? {
for w in NSApplication.shared.windows {
if w.title == "demo" {
return w
}
}
return nil
}
private func setupMainWindow() {
}
#MainActor func applicationDidFinishLaunching(_: Notification) {
guard let w = mainWindow else {
print("nothing to setup")
return
}
w.level = .floating
w.backgroundColor = NSColor.clear
w.isOpaque = false
w.standardWindowButton(.zoomButton)?.isHidden = true
w.standardWindowButton(.closeButton)?.isHidden = true
w.standardWindowButton(.miniaturizeButton)?.isHidden = true
}
}
The content view is defined as following
import SwiftUI
struct ContentView: View {
let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
#State var counter = 0
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world! \(counter)").font(.system(size: 20).monospaced())
}
.padding().onReceive(timer) { _ in
counter += 1
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Basically what this app does is render a transparent background window with some content on it. The content has a static image and a text that updates every second (with a counter).
The initial rendering of the window looks ok, but once the content starts update, there are two duplicated artifacts being rendered: one from the first rendering result and second from the latest rendering result. The second is overlapped on top the first one.
Here is a screenshot of the window rendering on top of a dark colored background (another window):
Here is a screenshot of the window rendering on top of a white colored background (another window):
It seems to me when the window initially launches, because it's transparent, somehow the OS or framework is adding some outline to the rendering content, as you can see from the "Hello world 0" string, there is a outline there. Maybe the framework is trying to do something to differentiate the window content from other content below it?
When the window starts updating the content, the new content will be re-drawn, but the initial captured outline is still there, leaving this weird artifact that doesn't match the current rendered content.
I've tried to disable the transparent window (with solid background or background with non-zero alpha). That will completely eliminate the issue. The added outline is only seen when the window is completely transparent. As far as I can tell, it's related to the transparent window background and the outline added to the content.
Update: using hasShadow=false won't remove the border completely (the top is still visible on black background).

Answer 1

I'm configuring the window in a slightly different way, without the need for an AppDelegate, but I'm seeing the same thing. With a backgroundColor of .clear, not only is the rendering artefact apparent, also the window has no border.
Using a NSColor.white.withAlphaComponent(0.00001) as the backgroundColor eliminates the rendering issue, and also shows the border correctly.
struct Mac_SwiftUI_testApp: App {
var body: some Scene {
Window("demo", id: "demo") {
ContentView()
.task {
NSApplication.shared.windows.forEach { window in
guard window.identifier?.rawValue == "demo" else { return }
window.standardWindowButton(.zoomButton)?.isHidden = true
window.standardWindowButton(.closeButton)?.isHidden = true
window.standardWindowButton(.miniaturizeButton)?.isHidden = true
window.backgroundColor = NSColor.white.withAlphaComponent(0.00001)
window.isOpaque = false
window.level = .floating
}
}
}
.windowStyle(.hiddenTitleBar)
}
}
With backgroundColor = .clear
With backgroundColor = NSColor.white.withAlphaComponent(0.00001)
After trying a few things out, I found that setting
window.hasShadow = false
will fix your problem. It also removes the top "line" on the clear window