title: How to round only top corners of a scrollview in swiftui in latest iOS 14
body: <p>I am trying to round only the top corners of a scrollview. Providing a custom shape in .clipShape() modifier used to work fine in earlier iOS versions but in the latest iOS 14 the bottom content of scrollview is disappearing. Please do suggest any workarounds</p>
  <p>Here's the custom shape for rounding specific corners:</p>
  <pre><code>struct RoundedCorner: Shape {
      
      var radius: CGFloat = .infinity
      var corners: UIRectCorner = .allCorners
      
      func path(in rect: CGRect) -&gt; Path {
          let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
          return Path(path.cgPath)
      }
  }
  
  extension View {
      func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -&gt; some View {
          clipShape( RoundedCorner(radius: radius, corners: corners) )
      }
  }
  </code></pre>
  <p>here's the code for a sample view implementing custom rounded corner modifier:</p>
  <pre><code>struct SampleView: View {
      
      @State var fullname: String
      @State var email: String
      @State var phone: String
      @State var username: String
      
      var body: some View {
          ZStack {
              Color(.red).edgesIgnoringSafeArea(.top)
              VStack {
                  Header()
                  ZStack {
                      Color(.systemBackground).edgesIgnoringSafeArea(.bottom)
                      ScrollView {
                          VStack {
                              Text(&quot;Title&quot;)
                                  .font(.largeTitle)
                                  .foregroundColor(.primary)
                                  .bold()
                                  .padding()
                                  .frame(maxWidth: .infinity, alignment: .leading)
                              TextField(&quot;type here...&quot;, text: $fullname)
                                  .padding()
                              TextField(&quot;type here...&quot;, text: $email)
                                  .padding()
                              TextField(&quot;type here...&quot;, text: $phone)
                                  .padding()
                              TextField(&quot;type here...&quot;, text: $username)
                                  .padding()
                              TextField(&quot;type here...&quot;, text: $fullname)
                                  .padding()
                              TextField(&quot;type here...&quot;, text: $email)
                                  .padding()
                              TextField(&quot;type here...&quot;, text: $phone)
                                  .padding()
                              TextField(&quot;type here...&quot;, text: $username)
                                  .padding()
                              Button(action: {  }, label: {
                                  Text(&quot;Submit&quot;)
                                      .padding()
                                      .textCase(/*@START_MENU_TOKEN@*/.uppercase/*@END_MENU_TOKEN@*/)
                              })
                              .padding()
                          }
                      }
                  }
                  .frame(height: UIScreen.screenHeight/1.5)
                  .cornerRadius(10, corners: [.topLeft, .topRight])
              }
          }
      }
  }
  
  private struct Header: View {
      var body: some View {
          HStack(alignment: .top) {
              VStack(alignment: .leading) {
                  Text(&quot;&quot;)
                      .foregroundColor(Globals.Color.background)
                  Spacer()
              }
              Spacer()
          }
      }
  }
  </code></pre>
  <p>Here's the screenshot with bottom content clipped off:</p>
  <p><a href="https://i.stack.imgur.com/Cjgqi.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Cjgqi.png" alt="Sample scrollview with custom rounded corners" /></a></p>