Glass Effect Label Shadow Clipping During Morph Animation

Question

Created 1d

Replies 2

Boosts 0

Participants 1

Hi all,

I’m experiencing a visual bug when applying the glass effect to a Label in Liquid Glass (current version 26.2 on simulator; also reproducible in 26.3.1 on device).

Issue:

On a label with .glassEffect(.regular), when collapsing via morph animation, the shadow is clipped during the animation, and then suddenly "pops" back to its un-clipped state, resulting in a jarring visual effect.

Minimal Example:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Menu {
            Button("Duplicate", action: {})
            Button("Rename", action: {})
            Button("Delete…", action: {})
        } label: {
            Label("PDF", systemImage: "doc.fill")
                .padding()
                .glassEffect(.regular)
        }
    }
}

#Preview {
    ContentView()
}

I am not sure if I am misusing the .glassEffect() on the label and maybe there is another more native way of achieving this look? Any advice or workaround suggestions would be greatly appreciated!

Boost

Answer 1

sashamoroz OP

1d

It seems like there are two ways of approaching this.

One (bad one) is: Adding the padding on the label view to compensate the native shadow.

            Menu {
                Button("Duplicate", action: {})
                Button("Rename", action: {})
                Button("Delete…", action: {})
            } label: {
                Label("PDF", systemImage: "doc.fill")
                    .padding()
                    .glassEffect(.regular)
                    .padding(40) // <- Here
            }

fix1 2.gif

Another one, much better:

            Menu {
                Button("Duplicate", action: {})
                Button("Rename", action: {})
                Button("Delete…", action: {})
            } label: {
                Label("PDF", systemImage: "doc.fill")
                    .padding()
                    .glassEffect(.clear)
            }

fix2 2.gif

Both have tradeoffs, one is a spatial one, since you have to provide space for it, but maybe useful for someone who is not constrained by space.

Another one - visual, since the glass effect .clear, doesn't have a frost. I guess this could be improved by overlaying a white color with low opacity to simulate the same effect.

0

Answer 2

sashamoroz OP

1d

If you’re set on using native views in iOS 26 (rather than custom LiquidContainers) and have encountered visual glitches, like shadow clipping or view hierarchy issues, when applying .glassEffect to Menu labels, this thread should be helpful.

After some research, I found a useful suggestion on Stack Overflow.

TLDR;

Wrapping your label in .compositingGroup() significantly improves rendering, especially when using more complex labels inside a Menu. To achieve the cleanest appearance, I recommend combining .compositingGroup() with .glassEffect(.clear).

Here’s a sample demonstrating this approach:

Menu {
    Button("Duplicate", action: {})
    Button("Rename", action: {})
    Button("Delete…", action: {})
} label: {
    VStack(alignment: .leading) {
        Text("Title")
            .tint(.primary)
        Text("Subtitle")
            .tint(.secondary)
    }
    .frame(maxWidth: .infinity, alignment: .leading)
    .padding()
    .glassEffect(.clear)
}
.compositingGroup()

0