UICollectionView's background is a screenshot of the initial position of the scrollview?

Question

This seems like a weird bug and I have adapted the code to see the bug better. By default the background color of my UICollectionView seems to be .systemBackground, but when I set it to .clear, instead of having a clear background, I have a "ghost" of the starting position of the first items in the scroll as a abckground. What could be happening?

The functions of the UICollectionView protocol:

   func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 30
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "LineCell", for: indexPath) as! LineCell
    cell.changeSize(indexPath.row)
    cell.text.text = String(indexPath.row)

    
    return cell
           
}

How I'm adding the view:

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal

layout.minimumLineSpacing = 0
layout.minimumInteritemSpacing = 0
layout.estimatedItemSize = CGSize(width: 50, height: 80)

numberPicker = UICollectionView(frame: .zero, collectionViewLayout: layout)

secondsControlHolder.addSubview(numberPicker!)
numberPicker?.delegate = delegate
numberPicker?.dataSource = delegate

numberPicker?.register(LineCell.self, forCellWithReuseIdentifier: "LineCell")

numberPicker?.translatesAutoresizingMaskIntoConstraints = false
numberPicker?.heightAnchor.constraint(equalToConstant: 120).isActive = true
numberPicker?.bottomAnchor.constraint(equalTo: secondsControlHolder.bottomAnchor).isActive = true
numberPicker?.leadingAnchor.constraint(equalTo: secondsControlHolder.leadingAnchor).isActive = true
numberPicker?.trailingAnchor.constraint(equalTo: secondsControlHolder.trailingAnchor).isActive = true
numberPicker?.backgroundColor = .clear
numberPicker?.showsVerticalScrollIndicator = false
numberPicker?.showsHorizontalScrollIndicator = false
numberPicker?.isPagingEnabled = false



numberPicker?.contentInset = UIEdgeInsets(top: 0, left: (delegate.view.frame.size.width)/2, bottom: 0, right: (delegate.view.frame.size.width)/2)



let arrow = UIView()
let arrowTriangle = UIImageView(image: UIImage(systemName: "arrowtriangle.up.fill"))

secondsControlHolder.addSubview(arrow)
secondsControlHolder.addSubview(arrowTriangle)

arrow.translatesAutoresizingMaskIntoConstraints = false
arrow.bottomAnchor.constraint(equalTo: secondsControlHolder.bottomAnchor, constant: -10).isActive = true
arrow.centerXAnchor.constraint(equalTo: secondsControlHolder.centerXAnchor).isActive = true
arrow.heightAnchor.constraint(equalToConstant: 100).isActive = true
arrow.backgroundColor = .label
arrow.widthAnchor.constraint(equalToConstant: 5).isActive = true
arrow.isUserInteractionEnabled = false

arrowTriangle.translatesAutoresizingMaskIntoConstraints = false
arrowTriangle.centerXAnchor.constraint(equalTo: arrow.centerXAnchor).isActive = true
arrowTriangle.topAnchor.constraint(equalTo: secondsControlHolder.bottomAnchor, constant: -130).isActive = true
arrowTriangle.tintColor = .label
arrowTriangle.heightAnchor.constraint(equalToConstant: 23).isActive = true
arrowTriangle.widthAnchor.constraint(equalToConstant: 30).isActive = true
    

The LineCell class:

import UIKit

class LineCell: UICollectionViewCell {
    let lineHolder = UIView()
    let text = UILabel()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        text.text = "test"
        text.textColor = .white
        lineHolder.translatesAutoresizingMaskIntoConstraints = false
        lineHolder.addSubview(text)
        text.translatesAutoresizingMaskIntoConstraints = false
        text.topAnchor.constraint(equalTo: lineHolder.topAnchor).isActive = true
        text.bottomAnchor.constraint(equalTo: lineHolder.bottomAnchor).isActive = true
        text.leadingAnchor.constraint(equalTo: lineHolder.leadingAnchor).isActive = true
        text.trailingAnchor.constraint(equalTo: lineHolder.trailingAnchor).isActive = true
        addSubview(lineHolder)
        

//        layer.backgroundColor = CGColor(red: 100, green: 100, blue: 100, alpha: 1)
//           setupLineHolder()
  
       }
    
    
    
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    

    func setupLineHolder(){

        lineHolder.frame = CGRect(x: 0, y: 0, width: 1, height: 80)
        

        
        lineHolder.backgroundColor = .label
  
//        setupLine()
      
    }
    
    func changeSize(_ index: Int){
        if index % 5 == 0 {
            lineHolder.frame = CGRect(x: 0, y: 0, width: 50, height: 80)
            lineHolder.backgroundColor = .label
            
        }else{
            lineHolder.frame = CGRect(x: 0, y: 15, width: 50, height: 50)
            lineHolder.backgroundColor = .label.withAlphaComponent(0.7)

        }
    }
  
}

Answer 1

Turns out I was calling setupControlsArea() twice. It wasn't just the UICollectionView that was duplicated, but the whole controls area view.