Buttons on tvOS with text are blurred

When adding buttons to a sheet, on tvOS the text is blurred in the buttons, making it illegible. Feedback: FB21228496

(used GPT to extract an example from my project for a test project to attach here)

//  ButtonBlurTestView.swift
//  Icarus
//
//  Test view to reproduce blurred button issue on tvOS
//

import SwiftUI

struct ButtonBlurTestView: View {
    @State private var showSheet = false
    @State private var selectedTags: [Int] = []
    @State private var newTagName: String = ""
    
    // Hardcoded test data
    private let testTags = [
        TestTag(id: 1, label: "Action"),
        TestTag(id: 2, label: "Comedy"),
        TestTag(id: 3, label: "Drama"),
        TestTag(id: 4, label: "Sci-Fi"),
        TestTag(id: 5, label: "Thriller")
    ]
    
    var body: some View {
        NavigationStack {
            VStack {
                Text("Button Blur Test")
                    .font(.title)
                    .padding()
                
                Button("Show Test Sheet") {
                    showSheet = true
                }
                .buttonStyle(.borderedProminent)
                .padding()
                
                Text("Tap the button above to open a sheet with buttons inside a Form.")
                    .font(.caption)
                    .foregroundColor(.secondary)
                    .multilineTextAlignment(.center)
                    .padding()
            }
            .navigationTitle("Blur Test")
            .sheet(isPresented: $showSheet) {
                TestSheetView(
                    selectedTags: $selectedTags,
                    newTagName: $newTagName,
                    testTags: testTags
                )
            }
        }
    }
}

struct TestSheetView: View {
    @Environment(\.dismiss) private var dismiss
    @Binding var selectedTags: [Int]
    @Binding var newTagName: String
    let testTags: [TestTag]
    
    var body: some View {
        NavigationStack {
            VStack {
                // Header
                VStack {
                    Text("Testing")
                        .font(.title2)
                        .bold()
                    Text("Test TV Show")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                }
                .padding()
                
                // Form with buttons
                Form {
                    Section(header: Text("Summary")) {
                        Text("This is a test")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                    
                    Section(header: Text("Tags")) {
                        tagsSelectionView
                    }
                }
            }
            .navigationTitle("Add")
#if !os(tvOS)
            .navigationBarTitleDisplayMode(.inline)
#endif
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("Cancel") { dismiss() }
                }
                ToolbarItem(placement: .confirmationAction) {
                    Button("Add") { dismiss() }
                }
            }
        }
    }
    
    private var tagsSelectionView: some View {
        VStack(alignment: .leading) {
            // Tag pills in a grid
            let columns = [GridItem(.adaptive(minimum: 80), spacing: 8)]
            LazyVGrid(columns: columns, alignment: .leading, spacing: 8) {
                ForEach(testTags, id: \.id) { tag in
                    TagPill(
                        tag: tag,
                        selected: selectedTags.contains(tag.id)
                    ) {
                        if selectedTags.contains(tag.id) {
                            selectedTags.removeAll { $0 == tag.id }
                        } else {
                            selectedTags.append(tag.id)
                        }
                    }
                }
            }
            
            Divider()
            
            // Add new tag button
            HStack {
                TextField("New tag name", text: $newTagName)
#if os(tvOS)
                    .textFieldStyle(PlainTextFieldStyle())
#else
                    .textFieldStyle(RoundedBorderTextFieldStyle())
#endif
                Button("Add") {
                    // Test action
                    newTagName = ""
                }
                .disabled(newTagName.trimmingCharacters(in: .whitespaces).isEmpty)
            }
        }
    }
}

// Tag Pill - matches the structure from original project
private struct TagPill: View {
    let tag: TestTag
    let selected: Bool
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            Text(tag.label)
                .font(.callout)
                .lineLimit(1)
                .padding(.horizontal, 12)
                .padding(.vertical, 8)
                .background(
                    Capsule()
                        .fill(selected ? Color.accentColor : Color.secondary.opacity(0.15))
                )
                .overlay(
                    Capsule()
                        .stroke(selected ? Color.accentColor : Color.secondary.opacity(0.35), lineWidth: 1)
                )
                .foregroundStyle(selected ? Color.white : Color.primary)
                .contentShape(Capsule())
        }
        .buttonStyle(.plain)
#if os(tvOS)
        .focusable(true)
#endif
    }
}

struct TestTag {
    let id: Int
    let label: String
}

#Preview {
    ButtonBlurTestView()
}

Thank you for your post and the bug report. It appears that the issue is currently under investigation to determine whether it is a bug. Your code is also commendable, and the Test project you uploaded to the bug report is well-written.

Please keep an eye on the feedback assistant link.

You can see the status of your feedback in Feedback Assistant. There, you can track if the report is still being investigated, has a potential identifiable fix, or has been resolved in another way. The status appears beside the label "Resolution." We're unable to share any updates on specific reports on the forums.

For more details on when you'll see updates to your report, please see What to expect after submission.

Albert Pascual
  Worldwide Developer Relations.

Buttons on tvOS with text are blurred
 
 
Q