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