SWIFTUI LAYERING ISSUE: BACKGROUND ALWAYS APPEARS IN FRONT OF CONTENT
THE PROBLEM
I'm facing a frustrating issue in my SwiftUI macOS app where a background RoundedRectangle is consistently displaying in front of my content instead of behind it. This isn't an intermittent issue - it never works correctly. The colored background is always rendering on top of the text and icons, making the content completely unreadable.
Here's my current implementation:
private func sceneRow(for scene: Scene, index: Int) -> some View {
ZStack(alignment: .leading) {
// Hidden text to force view updates when state changes
Text("$$noteStateTracker)")
.frame(width: 0, height: 0)
.opacity(0)
// 1. Background rectangle explicitly at the bottom layer
RoundedRectangle(cornerRadius: 6)
.fill(sceneBackgroundColor(for: scene))
.padding(.horizontal, 4)
// 2. Content explicitly on top
HStack {
Image(systemName: "line.3.horizontal")
.foregroundColor(.blue)
.frame(width: 20)
Text("$$index). $$truncateTitle(scene.title.isEmpty ? "Untitled Scene" : scene.title))")
.foregroundColor(selectedScene?.id == scene.id ? .blue : .primary)
.fontWeight(selectedScene?.id == scene.id ? .bold : .regular)
Spacer()
if scene.isComplete {
Image(systemName: "checkmark.circle.fill")
.foregroundColor(.green)
.font(.system(size: 12))
.padding(.trailing, 8)
}
}
.padding(.vertical, 4)
.padding(.leading, 30)
}
.contentShape(Rectangle())
.onTapGesture {
selectedChapter = chapter
selectedScene = scene
}
.onDrag {
NSItemProvider(object: "$$scene.id.uuidString)|scene" as NSString)
}
.onDrop(of: ["public.text"], isTargeted: Binding(
get: { hoveredSceneID == scene.id },
set: { isTargeted in
hoveredSceneID = isTargeted ? scene.id : nil
}
)) { providers in
handleSceneDrop(providers, scene, chapter)
}
.contextMenu {
Button("Rename Scene") {
sceneToRename = scene
newSceneTitleForRename = scene.title
newSceneDescriptionForRename = scene.description
isRenamingScene = true
}
Button(role: .destructive) {
confirmDeleteScene(scene, chapter)
} label: {
Label("Delete Scene", systemImage: "trash")
}
}
}
Despite explicitly ordering elements in the ZStack with the background first (which should place it at the bottom of the stack), the RoundedRectangle always renders on top of the text and icons.
WHAT I'VE TRIED
I've attempted multiple approaches but nothing works:
ZStack with explicit zIndex values
ZStack {
RoundedRectangle(cornerRadius: 6)
.fill(sceneBackgroundColor(for: scene))
.padding(.horizontal, 4)
.zIndex(1)
HStack { /* content */ }
.padding(.vertical, 4)
.padding(.leading, 30)
.zIndex(2)
}
No effect - background still appears on top.
Using .background() modifier instead of ZStack
HStack { /* content */ }
.padding(.vertical, 4)
.padding(.leading, 30)
.background(
RoundedRectangle(cornerRadius: 6)
.fill(sceneBackgroundColor(for: scene))
.padding(.horizontal, 4)
)
Same issue - the background still renders in front of the content.
Custom container view with GeometryReader
struct SceneRowContainer: View {
var background: Background
var content: Content
init(@ViewBuilder background: @escaping () -> Background,
@ViewBuilder content: @escaping () -> Content) {
self.background = background()
self.content = content()
}
var body: some View {
GeometryReader { geometry in
// Background rendered first
background
.frame(width: geometry.size.width, height: geometry.size.height)
.position(x: geometry.size.width/2, y: geometry.size.height/2)
// Content rendered second
content
.frame(width: geometry.size.width, height: geometry.size.height)
.position(x: geometry.size.width/2, y: geometry.size.height/2)
}
}
}
This changed the sizing of the components but didn't fix the layering issue.
NSViewRepresentable approach
I tried implementing a custom NSViewRepresentable that manually manages the view hierarchy:
struct LayerOrderView: NSViewRepresentable {
let background: () -> Background
let content: () -> Content
func makeNSView(context: Context) -> NSView {
let containerView = NSView()
// Add background hosting view first (should be behind)
let backgroundView = NSHostingView(rootView: background())
containerView.addSubview(backgroundView)
// Add content hosting view second (should be in front)
let contentView = NSHostingView(rootView: content())
containerView.addSubview(contentView)
// Setup constraints...
return containerView
}
func updateNSView(_ nsView: NSView, context: Context) {
// Update views...
}
}
Even this direct AppKit approach didn't work correctly.
Using .drawingGroup()
ZStack {
// Background
RoundedRectangle(cornerRadius: 6)
.fill(sceneBackgroundColor(for: scene))
.padding(.horizontal, 4)
// Content
HStack { /* content */ }
.padding(.vertical, 4)
.padding(.leading, 30)
}
.drawingGroup(opaque: false)
Still no success - the background remains in front.
PROJECT CONTEXT
macOS app using SwiftUI
Scene contents need to be displayed on top of colored backgrounds
The view uses state tracking with a noteStateTracker UUID that updates when certain changes occur
App needs to maintain gesture recognition for taps, drag and drop, and context menus
The issue is completely reproducible 100% of the time - the background is always in front
WHAT I WANT TO ACHIEVE
I need a reliable solution to ensure that the background color (RoundedRectangle) renders behind the HStack content. The current behavior makes the text content completely unreadable since it's hidden behind the colored background.
Has anyone found a workable solution for this seemingly basic layering problem in SwiftUI on macOS?
Thank you for any help,
Benjamin
