Modal picker not scrolling right SwiftUI

Question

I created a modal but it seems to have a bug on the selection. When scrolling the left, it scrolls the right, I have to go to the very edge of the left to be able to scroll, this is how it looks:

import SwiftUI

struct ContentView: View {

@State var showingModal = false
@State var hours: Int = 0
@State var minutes: Int = 0

var body: some View {

    ZStack {
        VStack {
            Button("Show me"){
                self.showingModal = true
            }

            if $showingModal.wrappedValue {
                VStack(alignment: .center) {
                    ZStack{
                        Color.black.opacity(0.4)
                            .edgesIgnoringSafeArea(.vertical)
                        // this one is it
                        VStack(spacing: 20) {
                            Text("Time between meals")
                                .bold().padding()
                                .frame(maxWidth: .infinity)
                                .background(Color.yellow)
                                .foregroundColor(Color.white)

                            HStack {
                                Spacer()
                                VStack {
                                    Picker("", selection: $hours){
                                        ForEach(0..<4, id: \.self) { i in
                                            Text("\(i) hours").tag(i)
                                        }
                                    }
                                    .frame(width: 150, height: 120)
                                    .clipped()
                                }

                                VStack {
                                    Picker("", selection: $minutes){
                                        ForEach(0..<60, id: \.self) { i in
                                            Text("\(i) min").tag(i)
                                        }
                                    }
                                    .frame(width: 150, height: 120)
                                    .clipped()
                                }
                            }

                            Spacer()

                            Button(action: {
                                self.showingModal = false
                            }){
                                Text("Close")
                            } .padding()
                        }
                        .frame(width:300, height: 300)
                        .background(Color.white)
                        .cornerRadius(20).shadow(radius: 20)
                    }   
                }
            }
        }
    }
}
}

How can I fix that little bug? I tried playing around with the layout but no use... any help would be appreciated

Answer 1

What if I told you the reason your Picker not working was this line?

.cornerRadius(20).shadow(radius: 20)

Unfortunately, SwiftUI is still quite buggy and sometimes it doesn't do what it is supposed to do and especially Pickers are not that reliable. I guess we'll need to wait and see the next iteration of SwiftUI, but for now you can replace that line with the code below:

.mask(RoundedRectangle(cornerRadius: 20))
.shadow(radius: 20)

Answer 2

There are just modifiers which affect all view hierarchy (ie. all subviews) that can change resulting layout/presentation/behaviour. And .cornerRadius and .shadow are such type modifiers.

The solution is to apply (as intended) those modifiers only to entire constructed view, and here it is

.compositingGroup()  // <<< fix !!
.cornerRadius(20).shadow(radius: 20)

where .compositionGroup is intended to make above view hierarchy flat rendered and all below modifiers applied to only to that flat view.