Skip to content

Fade transitions cause grey flash with shadowed elements #160

@psx2

Description

@psx2

When using any fade transition (.fade(), .fade(.cross), etc.) on a NavigationStack that contains NavigationLinks with shadowed elements, there's a noticeable grey flash during the transition. This only occurs when the shadowed elements have a white background.

Environment

  • iOS 18.5
  • SwiftUI
  • swiftui-navigation-transitions 0.15.1
  • Xcode 16.2

Reproduction Steps

  1. Create cards with white background and shadows:
    .background(Color.white)
    .cornerRadius(20)
    .shadow(color: Color.black.opacity(0.15), radius: 0.5, x: 1, y: 1.5)
    .shadow(color: Color.black.opacity(0.25), radius: 1, x: 0, y: 0)

  2. Apply fade transition to NavigationStack containing these cards:
    NavigationStack {
    // content with NavigationLinks containing shadowed cards
    } .navigationTransition(.fade(.cross)) // or .fade(), etc.

  3. Tap on a card to navigate - observe a brief grey flash appears during the transition, specifically where shadows are rendered on white background.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions