Strange UI rendering problem on iOS 14 when a button is placed on a section header/footer

Question

In the following sample code, a button is placed on a (form-) section header, which will toggle a sheet whenever it is pressed. The sheet has a list of elements to show.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            Form{
                Section(header: headerView()) {
                    Text("Some Text")
                }
            }
        }
    }
}

struct headerView: View {
    @State var showSheet = false

    var body: some View {
        Button(action: { self.showSheet.toggle()}){
            HStack{
                Spacer()
                Image(systemName: "pencil.and.ellipsis.rectangle")
                Text("View Sheet")
            }
        }.sheet(isPresented: $showSheet) {sheetView()}
    }
}

struct sheetView: View {
    @Environment(\.presentationMode) private var presentationMode

    var body: some View {
        NavigationView{
            VStack(alignment: .leading) {
                List() {
                    Text("List element 1")
                    Text("List element 2")
                    Text("List element 3")
                    Text("List element 4")
                }
            }
            .navigationBarTitle(Text("Logs"), displayMode: .inline)
            .navigationBarItems(leading: EditButton(), trailing: Button(action: {self.presentationMode.wrappedValue.dismiss()}) { Text("Done").bold()})
        }
    }
}

This has been working totally fine on iOS 13. However, in iOS 14 as you can see in my screenshot bellow it renders fully corrupted:

1. List elements have strange font size, color and are in upper-case (most important one!)
2. NavigationBar Buttons are greyed and in upper-case
3. NavigationBar title is in upper-case

The corrupted behaviour stays as long as you don't touch the screen. When you touch the screen and drag the sheet a little bit down then the list appearance will get corrected. If you do the same to the NavigationBar, it will then also be rendered correctly.

Is anybody also facing this issue? Any known fixes?

Answer 1

This looks like a bug. The possible workaround is to move sheet out of Form.

Tested with Xcode 12.0 / iOS 14.

struct ContentView: View {
    @State var showSheet = false
    var body: some View {
        VStack{
            Form{
                Section(header:
                        headerView(showSheet: $showSheet)
                        ) {
                    Text("Some Text")
                }
            }
        }.sheet(isPresented: $showSheet) {sheetView()}
    }
}

struct headerView: View {
    @Binding var showSheet: Bool

    var body: some View {

        Button(action: { self.showSheet.toggle()}){
            HStack{
                Spacer()
                Image(systemName: "pencil.and.ellipsis.rectangle")
                Text("View Sheet")
            }
        }
    }
}