SwiftUI: VStack in VStack, labels are truncated

Question

I have an issue with SwiftUI. When I use multiple VStacks inside another VStack, I have strange issues with text truncating.

Here is the smallest reproducible example:

The "B" label is truncated, but it should not be. If I change the "A" text or the "B" text, by adding or removing some letters, the "B" label is sometimes buggy, sometimes ok.

Here is the corresponding code:

struct ContentView: View {
    var body: some View {
        VStack {
            VStack {
                Text("AAAAAAAAAAAAAAAAAAAA")
            }.background(Color.yellow)
            VStack {
                Text("BBBBBBBB")
                Text("CCC")
            }.background(Color.orange)
        }.background(Color.blue)
    }
}

Do I miss something or this is a bug of SwiftUI?

Thanks!

Environment: Xcode 11.4.1, iOS 13.4.1, Tested on Previews, Simulator & Devices

Edit: This behaves differently depending on the preview/simulator device you are using. For example, the above code, copy-pasted into a fresh project, is buggy on iPhone 11 Pro / 11 Pro Max and 8+. On iPhone 8 / 11 / SE 1&2, this works fine. So maybe it is related to some computational/rounding problems in the SwiftUI layout engine?

Can you check running the app once on simulator? I check one XCODE 11.3, it worked completely fine — Manoj
@Manoj Same issue on simulators and devices. So maybe it's a regression of Xcode 11.4? Did you tried adding/removing some A and B? — tdimeco
It does look like a bug. It happens only when you add/remove a character to come to total of 20. — staticVoidMan
@staticVoidMan Actually it does not seem to be related to the number of characters, but the width of the label. If you replace all uppercased letters (A, B and C) by their lowercased version (a, b, and c), the issue happens more often as your add/remove letters. — tdimeco

Peter Pohlmann Peter Pohlmann · Accepted Answer · 2020-04-22T13:07:53

.fixedSize(horizontal: true, vertical: false) should fix it.

struct ContentView: View {
    var body: some View {
        VStack {
            VStack {
                Text("AAAAAAAAAAAAAAAAAAAA")
                  .fixedSize(horizontal: true, vertical: false)
            }.background(Color.yellow)
            VStack {
                Text("BBBBBBBB")
                   .fixedSize(horizontal: true, vertical: false)
                Text("CCC")
                   .fixedSize(horizontal: true, vertical: false)
            }.background(Color.orange)
        }.background(Color.blue)
    }
}

For multilinetext: .fixedSize(horizontal: false, vertical: true)

struct ContentView2: View {
    var body: some View {
        VStack {
            VStack {
                Text("Swift enums are really powerful, but they can often be made even more capable when mixed with")
                  .fixedSize(horizontal: false, vertical: true)
                  .multilineTextAlignment(.center)
            }.background(Color.yellow)
            VStack {
                Text("Swift enums are really powerful, but they can often be made even more capable when mixed ")
                   .fixedSize(horizontal: false, vertical: true)
                   .multilineTextAlignment(.center)
                Text("Swift enums are really powerful, but they can often be made even more capable   ")
                   .fixedSize(horizontal: false, vertical: true)
                   .multilineTextAlignment(.center)
            }.background(Color.orange)
        }.background(Color.blue)
    }
}

struct ContentView2_Previews: PreviewProvider {
  static var previews: some View {
    ContentView2()
  }
}

SwiftUI: VStack in VStack, labels are truncated

2 Answers