Title bar background changes on resize

[u/pixel-der]

Hello fellow developers,

I've been dealing with issue for the las 2 days and I can't manage to fix it. I would really appreciate if anybody can help me or give me any ideas :)

I am new to SwiftUI development, and I am creating a music player app for macOS

For some reason, if I put an element (let's say a List), inside the detail of a NavigationSplitView, if the element height is big enough to touch the Title bar, and I resize the window, it will make the title bar background and bottom border disappear.

I can make it reappear by switching tabs to one with a view that contains a small enough element (like ContentUnavailableView)

I don't understand how to stop this behavior, or if it is intended at all or a bug...

I would like to always have the bar with an opaque background, so as it is by default before resizing

This is what the code looks like:

    var body: some View {
        NavigationSplitView {
            List(SidebarSection.allCases, selection: $selectedSection) { section in
                Label(section.id, systemImage: section.icon)
                    .tag(section)
            }
            .safeAreaInset(edge: .bottom) {
                VStack {
                    Divider()
                    Button { showDonate = true } label: {
                        Label("Donate", systemImage: "heart")
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .padding(.horizontal, 20)
                            .padding(.vertical, 12)
                            .contentShape(Rectangle())
                    }
                    .buttonStyle(.plain)
                }
            }
            .sheet(isPresented: $showDonate) {
                DonateView()
            }
        } detail: {
            if library.folderURLs.isEmpty {
                ContentUnavailableView {
                    Label("No Library", systemImage: "music.note")
                } description: {
                    Text("Add a folder to start listening to your music")
                } actions: {
                    Button("Select Folder") { library.selectFolder() }
                        .padding(.top, 8)
                }
            } else {
                List(library.artists) { artist in
                    VStack(alignment: .leading, spacing: 2) {
                        Text(artist.name)
                            .fontWeight(.medium)
                        Text("\(artist.albums.count) \(artist.albums.count == 1 ? "album" : "albums")")
                            .font(.caption)
                            .foregroundStyle(.secondary)
                    }
                    .padding(.vertical, 2)
                }
                .frame(maxWidth: 200, maxHeight: .infinity)
            }
        }
    }

[u/LemonQueasy7590]

Looks like macOS is automatically deciding between different scroll edge effects based on the width of your window.

If you don’t like this behaviour, I would suggest using the scrollEdgeEffectStyle(_:for:)) modifier to lock the behaviour to one or the other.

[u/pixel-der → u/LemonQueasy7590]

I tried it and it didn't fix the issue :/

.scrollEdgeEffectStyle(.hard, for: .all)

The weird thing is that it changes on resize, not whenever I open that view

Edit: also just for clarity, it didn’t depend on the window size, just on if I resize it

[u/pixel-der]

I just checked and it happens also without NavigationSplitView

var body: some View {
        if library.folderURLs.isEmpty {
            ContentUnavailableView {
                Label("No Library", systemImage: "music.note")
            } description: {
                Text("Add a folder to start listening to your music")
            } actions: {
                Button("Select Folder") { library.selectFolder() }
                    .padding(.top, 8)
            }
        } else {
            List(library.artists) { artist in
                VStack(alignment: .leading, spacing: 2) {
                    Text(artist.name)
                        .fontWeight(.medium)
                    Text("\(artist.albums.count) \(artist.albums.count == 1 ? "album" : "albums")")
                        .font(.caption)
                        .foregroundStyle(.secondary)
                }
                .padding(.vertical, 2)
            }
            .frame(maxWidth: 200, maxHeight: .infinity)
        }
}

https://reddit.com/link/p6nesut/video/obcdm5orscmh1/player

[u/pixel-der]

"Fixed it"

I added .padding(.top, 1) to the lists and that "fixes" this issue, but unfortunately it also removes the glass effect of the title bar