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