UILabel.text is overlapping on change

Question

I have a simple UIViewController with UILabel and UIButton:

class MyScreen: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .blue
        let values = ["AAA", "BBB", "CCC", "DDD"]
        var index = 0
        let label = UILabel(frame: .init(x: 100, y: 100, width: 100, height: 50))
        label.textColor = .yellow
        view.addSubview(label)
        let button = UIButton(frame: .init(x: 100, y: 200, width: 100, height: 50))
        button.setTitle("Tap", for: .normal)
        button.addAction(.init(handler: { _ in
            label.text = values[index]
            label.backgroundColor = (index % 2 == 0 ? nil : .red)
            index = (index + 1) % values.count
        }), for: .primaryActionTriggered)
        view.addSubview(button)
    }
}

As you can see I just change label.text and label.backgroundColor on tap. However, the text is overlapping. And label.backgroundColor is always .red.

Is it an iOS bug? Or how can I change UILabel.text without overlapping?

Answer 1

To fix this issue replace label.backgroundColor = (index % 2 == 0 ? nil : .red) with label.backgroundColor = (index % 2 == 0 ? .clear : .red). You should not use nil for UILabel.backgroundColor.