SwiftUI Rectangle suddenly transforms into RoundedRectangle

Question

I have just started learning SwiftUI and was playing around with views and animations, I wanted to make controller kinda like apple has in control center for volume or brightness. But i found funny little thing and i don't really know what to do with that.

struct DragControler: View {
    @GestureState var fillPercentGS : Double = 0.5
    @State var fillPercent = 0.5
    var body: some View {
        ZStack{

            Rectangle()
            GeometryReader { geometry in
                VStack(spacing: 0) {
                    Rectangle().foregroundColor(.red) //these rects
                    Rectangle().foregroundColor(.green).frame(height: geometry.size.height * CGFloat(self.fillPercent))
                }.gesture(DragGesture(coordinateSpace: .local).updating(self.$fillPercentGS, body: { (value, state, transaction) in
                    state =  Double(value.location.y/geometry.size.height)

                }).onChanged({ (value) in
                    self.fillPercent = max(0, min(1 - Double(value.location.y/geometry.size.height), 1))
                }))
            }
            Text("\(fillPercent)").foregroundColor(.white)
            }.cornerRadius(50).aspectRatio(1/4, contentMode: .fit).padding()
    }
}

GIF when one of rects fills entire view it becomes rounded

So as you can see on the gif, when i drag it all the way to the top or bottom Rectangles which are clearly said to be Rectangles in code become rounded rectangles

So, why is it happening? I have tried to replace.cornerRadius() modifier with clipShape(RoundedRect(...)) but it doesn't help. But it i've found that it helps to explicitly set corner radius of these Rectangles to zero.

Rectangle().cornerRadius(0).foregroundColor(.red)
Rectangle().cornerRadius(0).foregroundColor(...)

My guess is that it is kinda optimisation swiftUI does on the background

Thanks in advance

Answer 1

It looks like a bug to me, but there is an easy fix. Simply explicitly set the corner radius of your green rectangle to 0:

Rectangle().foregroundColor(.green).frame(height: geometry.size.height * CGFloat(self.fillPercent)).cornerRadius(0)