SwiftUI. Square shadow around a circular image when using the context menu

Question

In my application, I am using a circular image with a drop shadow as a context menu button.

Code:

    Image(systemName: "plus")
        .padding(20)
        .background(Color.yellow)
        .clipShape(Circle())
        .shadow(radius: 10)
        .contextMenu{
            Button {} label: {
                Label("test", systemImage: "")
            }
        }

Result:

When the context menu is invoked, the shadow becomes square ((

Can I fix this somehow?

It is not a shadow it is *menu* itself, it is square and not transparent. — Asperi, Oct 27 '21 at 07:06
Yes, I understand something like that. The question is, is it possible to somehow set the shape of the interface element so that the menu respects it in its own animation? — vtezin, Oct 27 '21 at 07:55
It is solvable issue, not a big deal, need some playing with code. Try overly. — ios coder, Oct 27 '21 at 08:31

score 0 · Answer 1 · edited Oct 28 '21 at 04:06

The solution is here: SwiftUI Image clipped to shape has transparent padding in context menu . In my case I need to add the modifier .contentShape(Circle()) to Image(). Final correct code:

Image(systemName: "plus")
    .padding(20)
    .background(Color.yellow)
    .clipShape(Circle())
    .shadow(radius: 10)
    .contentShape(Circle()) //here
    .contextMenu {
        Button {} label: {
            Label("test", systemImage: "")
        }
    }

SwiftUI. Square shadow around a circular image when using the context menu

1 Answers1