iosswiftuikituicollectionviewcompositionallayoutios18

Background Decoration View Overlapping Collection View Cells on iOS 18+


I am encountering an issue with my UICollectionView layout where the background decoration view is overlapping the collection view cells. Below is the relevant code for my layout configuration:

let itemSize = NSCollectionLayoutSize(
    widthDimension: .absolute(60),
    heightDimension: .absolute(100)
)
let item = NSCollectionLayoutItem(layoutSize: itemSize)

let groupSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1),
    heightDimension: .absolute(100)
)
let group = NSCollectionLayoutGroup.horizontal(
    layoutSize: groupSize,
    subitems: [item]
)

let section = NSCollectionLayoutSection(group: group)
section.decorationItems = [
    NSCollectionLayoutDecorationItem.background(elementKind: "customBackgroundElementKind")
]
return section

debug view hierarchy

Problem: The background decoration view is appearing on top of the collection view cells, which results in the cells being obscured. This issue is specific to iOS 18 and does not occur on iOS 17 and below.

Request: Can anyone provide guidance or suggest a solution to ensure the decoration view does not overlap the collection view cells specifically on iOS 18?

Thank you!

What I Tried: I have tried using the default configuration for NSCollectionLayoutDecorationItem to add a background decoration view to my UICollectionView. My expectation was that the background view would appear behind the collection view cells.

What I Expected: I expected the background decoration view to be rendered behind the collection view cells, providing a background for the section.

What Actually Resulted: In iOS 18+, the background decoration view is appearing on top of the collection view cells, which results in the cells being obscured. This issue does not occur on iOS 17 and below.


Solution

  • We had same problem in our project, this how we were able to solve it:

    override func collectionView(_ collectionView: UICollectionView, willDisplaySupplementaryView view: UICollectionReusableView, forElementKind elementKind: String, at indexPath: IndexPath) {
        guard elementKind == "customBackgroundElementKind" else { return }
        // Custom logic for setting background color
        let backgroundView = view as? BackgroundSection
        backgroundView?.setColor(.red)
    
        // actual workaround
        if #available(iOS 18.0, *) {
            backgroundView?.layer.zPosition = -5
        }
    }