.buttonStyle(.glass) background changes abruptly between 50pt and 51pt in dark mode

[Submitted as FB22612121]

A SwiftUI Button using .buttonStyle(.glass) with .buttonBorderShape(.capsule) changes its background abruptly when its size goes from 50×50 to 51×51 points in dark mode. This appears to be a threshold in opacity/material rather than a smooth size-based change.

The sample shows identical buttons at 40, 50, 51, and 60 points, with a clear jump between 50 and 51. Measured RGB values shift from 19,19,19 to 30,30,30. The effect also varies with the background, which points to a material/opacity change rather than a fixed fill.

ENVIRONMENT

  • iOS 26.4.1 (23E254a)
  • iOS 26.5 (23F5059e)

REPRO STEPS

  1. Create a new iOS SwiftUI project.
  2. Replace ContentView with the sample code below.
  3. Run the app or open ContentView in SwiftUI Preview (dark mode).
  4. Observe the buttons at 40×40, 50×50, 51×51, and 60×60.
  5. Compare the 50pt and 51pt buttons.

ACTUAL

The background changes abruptly between 50pt and 51pt. The 51pt button uses a noticeably different opacity/material, producing a visible jump in dark mode.

EXPECTED

The glass background should remain visually consistent or change smoothly as size changes by 1 point. 50pt and 51pt buttons should not have a discontinuous difference.

SCREENSHOT

SAMPLE CODE

struct ContentView: View {
    private let sizes: [CGFloat] = [40, 50, 51, 60]

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 16) {
                Text("Glass button dark-mode size jump")
                    .font(.headline)

                Text("All buttons use .buttonStyle(.glass). Only the label frame changes.")
                    .font(.footnote)
                    .foregroundStyle(.secondary)

                ForEach(Array(sizes.enumerated()), id: \.offset) { index, size in
                    HStack(spacing: 14) {
                        Button {
                        } label: {
                            Text("\(index + 1)")
                                .font(.system(size: size * 0.42, weight: .medium))
                                .frame(width: size, height: size)
                        }
                        .buttonStyle(.glass)
                        .buttonBorderShape(.capsule)

                        Text("label frame: \(Int(size)) x \(Int(size))")
                            .font(.callout.monospacedDigit())
                            .foregroundStyle(.secondary)
                    }
                }
            }
            .padding(24)
        }
        .preferredColorScheme(.dark)
    }
}

Since I never got an answer and my app has buttons that resize during a drag, I removed the .buttonStyle(.glass) modifier for now.

Not a huge loss, but it’d be nice if glass button backgrounds didn’t change based on size. If they do need to change, the transition should be gradual so it animates smoothly with a size change.

.buttonStyle(.glass) background changes abruptly between 50pt and 51pt in dark mode
 
 
Q