Glass effect interactive effect issue when used with concentric shapes

Thanks for the post. So interesting and there are many SwiftUI people that are probably going to jump into the thread. In my case I wanted to test the use .clear.interactive(), SwiftUI generates a visual highlight layer that responds to user touches. To optimize this highlight animation, the system tries to resolve the shape provided in the in: parameter into a standard primitive. Because .concentric corners are dynamic, the interaction highlight engine currently fails to resolve the exact bezier path for the mask? In this case manifests as a highly rounded rectangle.

Sometimes the interaction engine needs an explicit contentShape to properly map the hit-testing and highlight bounds, rather than relying solely on the in: parameter of the glass effect.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .glassEffect(.clear.interactive(), in: .rect(cornerRadius: 32))
                .padding(36)
                .ignoresSafeArea()
                .preferredColorScheme(.dark)
        }
        .padding()
    }
}

If the interactive highlight is bleeding outside the bounds of your glass pane and forming a capsule, you can try forcing a hard clip on the entire view hierarchy after applying the glass effect. This forces the compositor to mask everything, including the interactive highlight layer.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .glassEffect(.clear.interactive(), in: .rect(corners: .concentric))
                .clipShape(.rect(corners: .concentric)) // Hard clip the highlight
                .padding(36)
                .ignoresSafeArea()
                .preferredColorScheme(.dark)
        }
        .padding()
    }
}

Am I missing something?

Albert
  Worldwide Developer Relations.

+1.

I'm unable to get interactive glass and concentric rect to work together. In my case I also wanna clip the view anyway (I'm using negative padding on one of the subviews to provide it's own shaded background)

When using

.glassEffect(.clear.interactive(), in: .rect(corners: .concentric, isUniform: true))

on its own I'm getting the proper shape for the view itself with even edge highlights, the interactive highlight surface effect however gets a default capsule shape anyway.

Adding a clip shape like mentioned above however, causes the view to lose highlights in the corners.

ZStack {
    VStack {
        children
    }
}
.glassEffect(.clear.interactive(), in: .rect(corners: .concentric, isUniform: true))
.clipShape(.rect(corners: .concentric, isUniform: true))
.scenePadding()

So as of now the closest I was able to get it to working is using a .rect shape in the glassEffect() modifier and giving up polish in corner highlights. It is a shame though. Intuitively the shape passed into glassEffect() should resolve same way as it does when fed into clipShape().

Regards,

Kamil

@kamilochel Thanks for the post, any chance you can create a new thread with those images, description and provide the full code of your view as I only see the children code

.glassEffect only applies the shape mask and edge highlights to the glass material itself. The interactive highlight (the surface hover effect) calculates its own boundary based on the view's hit-testing shape, which often defaults to a capsule or standard rectangle if it encounters highly rounded corners without an explicit content shape.

But I would appreciate if in a new thread you can provide the full code for SwiftUI engineers to help you with that effect.

Thanks

Albert
  Worldwide Developer Relations.