SwiftUI Mac OS toolbar button seems behind other elements

Hi

I use a WindowsGroup with a NavigationView and inside of this a list as a sidebar and an HStack for the content. In addition I use a toolbar with several icons.

It seems, that the toolbar is behind the content if the button contains only an image. It works correctly if I use an image and a text for the button.

Only when I move the mouse pointer over the toolbar icon the icon becomes active and stays active.

It doesn't matter where I place the toolbar or whether I use a padding for the content or not. And if I remove the top padding for the content the complete content area goes from edge to edge.

I guess that I missed some modifier for the toolbar and/or the content, but can't figure out which one.

Thank you for helping


  • Swift version 5.5.1
  • Xcode 13.1
  • MacOS Monterey (12.0.1)

    var body: some Scene {

        WindowGroup {

            NavigationView{

                List {
                    Text("One")
                    Text("Two")
                }

                Text("Hello, world!")
                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
                    .background(Color.gray)
                    .padding(.all, .zero)
                    .padding(.top, 1.0) // removed this in video 2

                    .toolbar {
                        ToolbarItemGroup(placement: .navigation) {
                            Button(action: {
                            }, label: {
                                Image(systemName: "sidebar.left").imageScale(.large)

                            })
                            Button(action: {
                            }, label: {
                                HStack{
                                    Image(systemName: "sidebar.left").imageScale(.large)
                                    Text("")
                                }
                            })
                        }
                    }
            }
        }
        .windowStyle(HiddenTitleBarWindowStyle())
    }

I am experiencing this behavior as well. I believe it is because there is a defect somewhere in SwiftUI that does not set the toolbar button state properly until mouseover. I have not found a way to work around this behavior yet, unfortunately.

I'm having the same issue. @Cloudworker , @AlanRThompson , have you been able to figure out what is happening here?

SwiftUI Mac OS toolbar button seems behind other elements
 
 
Q