Glass effect interactive effect issue when used with concentric shapes

Question

Created 17h

Replies 1

Boosts 0

Participants 2

Using .glassEffect(.clear.interactive(), in: shape), where shape is some concentric shape that adapts to corner radius of the device, results in appearing of highlighted capsule shape.

Code to reproduce this behavior

import SwiftUI

struct HelloLiquidGlass: View {
    var body: some View {
        if #available(iOS 26.0, *) {
            Text("Hello, World!")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
//                .glassEffect(.clear.interactive(), in: .rect(corners: .concentric))
//                .glassEffect(.clear.interactive(), in: ConcentricRectangle(uniformTopCorners: .fixed(80)))
                .padding(36)
                .ignoresSafeArea()
                .preferredColorScheme(.dark)
        }
    }
}

#Preview {
    HelloLiquidGlass()
}

Either of both commented-out modifiers produces the same result when user interacts with Liquid Glass pane (revealing of capsule shape that is not relative to actual shape of liquid glass effect modifier)

iOS 26.5 (23F73) SDK + iOS 26.5 (23F77) Simulator

Boost

Answer 1

DTS Engineer OP

Apple

14h

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()
    }
}

Simulator Screenshot - iPhone 17 Pro - 2026-05-14 at 15.23.07.png

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()
    }
}

Simulator Screenshot - iPhone 17 Pro - 2026-05-14 at 15.21.17.png

Am I missing something?

Albert   Worldwide Developer Relations.

0