Post

Replies

Boosts

Views

Created

ToolbarItem with .sharedBackgroundVisibility(.hidden) causes rectangular rendering artifact during navigation transitions on iOS 26
Description: When following Apple's WWDC guidance to hide the default Liquid Glass background on a ToolbarItem using .sharedBackgroundVisibility(.hidden) and draw a custom circular progress ring, a rectangular rendering artifact appears during navigation bar transition animations (e.g., when the navigation bar dims/fades during a push/pop transition). Steps to Reproduce: Create a ToolbarItem with a custom circular view (e.g., a progress ring using Circle().trim().stroke()). Apply .sharedBackgroundVisibility(.hidden) to hide the default Liquid Glass background. Navigate to a detail view (triggering a navigation bar transition animation). Observe the ToolbarItem during the transition. Expected Result: The custom circular view should transition smoothly without any visual artifacts. Actual Result: A rectangular bounding box artifact briefly appears around the custom view during the navigation bar's dimming/transition animation. The artifact disappears after the transition completes. Attempts to Resolve (All Failed): Using .frame(width: 44, height: 44) with .aspectRatio(1, contentMode: .fit) Using .fixedSize() instead of explicit frame Using Circle().fill() as a base view with .overlay for content Using Button with .buttonStyle(.plain) and Color.clear placeholder Various combinations of .clipShape(Circle()), .contentShape(Circle()), .mask(Circle()) Workaround Found (Trade-off): Removing .sharedBackgroundVisibility(.hidden) eliminates the rectangular artifact, but this prevents customizing the Liquid Glass appearance as intended by the API. Code Sample: swift if #available(iOS 26.0, *) { ToolbarItem { Button { // action } label: { Color.clear .frame(width: 32, height: 32) .overlay { ZStack { // Background arc (3/4 circle) Circle() .trim(from: 0, to: 0.75) .stroke(Color.blue.opacity(0.3), style: StrokeStyle(lineWidth: 4, lineCap: .round)) .rotationEffect(.degrees(135)) .frame(width: 28, height: 28) // Progress arc Circle() .trim(from: 0, to: 0.5) // Example: 50% progress .stroke(Color.blue, style: StrokeStyle(lineWidth: 4, lineCap: .round)) .rotationEffect(.degrees(135)) .frame(width: 28, height: 28) Text("50") .font(.system(size: 12, weight: .bold)) .foregroundStyle(Color.blue) Text("100") .font(.system(size: 8, weight: .bold)) .foregroundStyle(.primary) .offset(y: 12) } .background { Circle() .fill(.clear) .glassEffect(.clear.interactive(), in: Circle()) } } } .buttonStyle(.plain) } .sharedBackgroundVisibility(.hidden) // ⚠️ This modifier causes the rectangular artifact during transitions } Environment: iOS 26 Beta
Topic: UI Frameworks SubTopic: SwiftUI
0
0
41
1d