Hey, I've noticed a problem when using the new Navigation Transition.
Whenever the source view has an .shadow(.inner(...) applied in a .foregroundStyle or .fill the zoom animation fades in and starts from the center of the screen and not from the source view position.
This leads to inconsistent behavior when navigating through items that should have the same interaction.
I have tried applying .drawingGroup and .compositingGroup to the source view but it doesn't help.
I have also filed feedback, but checking here if there's a workaround (besides getting rid of all the inner shadows) or if I'm missing anything.
Thanks
import SwiftUI
struct BugWithNavigationZoom: View {
@Namespace private var namespace
@State private var viewWithInnerShadow: Bool = true
var body: some View {
NavigationStack {
Spacer()
VStack(alignment: .leading, spacing: 40) {
Toggle(isOn: $viewWithInnerShadow) {
Text("Inner Shadow")
.fontWeight(.bold)
}
}
.padding()
Spacer()
NavigationLink {
detailViewWithInnerShadow
.navigationTransition(.zoom(sourceID: "circleWork", in: namespace))
} label: {
if viewWithInnerShadow {
Circle()
.fill(.yellow
.shadow(.inner(color: .black, radius: 10, x: 0, y: 10))
)
.overlay {
Text("Tap me")
}
.frame(width: 100, height: 100)
.matchedTransitionSource(id: "circleWork", in: namespace)
} else {
Circle()
.fill(.yellow)
.overlay {
Text("Tap me")
}
.frame(width: 100, height: 100)
.matchedTransitionSource(id: "circleWork", in: namespace)
}
}
}
}
private var detailViewWithInnerShadow: some View {
VStack() {
Text(viewWithInnerShadow ? "Transition happened from the center of the screen - Inner shadow was applied to the source view" : "Animation started from source view - inner shadow was removed from source view")
.font(.title)
.fontWeight(.bold)
Circle()
.frame(width: 300, height: 300)
.foregroundStyle(.yellow
.shadow(.inner(color: .black, radius: 10, x: 0, y: 10))
)
}
}
}
#Preview {
BugWithNavigationZoom()
}