ContextMenu on a rounded LinearGradient produces sharp edges in SwiftUI

Question

I have the following view:

struct ContentView: View {
    var body: some View {
        LinearGradient(gradient: Gradient(colors: [.blue, .red]), startPoint: .topTrailing, endPoint: .bottomLeading)
            .cornerRadius(16)
            .frame(width: 140, height: 140)
            .contextMenu {
                Button("", action: {})
            }
    }

}

However, when the ContextMenu is invoked, the edges are not rounded:

I've tried several things, such as:

• Applying the clipShape modifier to clip it to a RoundedRectangle
• Wrapping the gradient as the background of a RoundedRectangle view
• Using a Color instead of a LinearGradient (which works as expected, but not what I need)

However none work. Any advice would be appreciated, thanks!

Answer 1

Add the following code after .frame(...):

.contentShape(RoundedRectangle(cornerRadius: 16, style: .continuous))