Background Decoration View Overlapping Collection View Cells

Question

Created Sep ’24

Replies 4

Boosts 2

Participants 5

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

Screenshot 2567-09-19 at 00.24.56.png

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!

Answered by bilal-springermedia in 805674022

I've checked iOS 18.1 beta as well. It's problem there as well.

@sunwukongTH

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
    }
}

Boost

Answer 1

DTS Engineer OP

Apple

Sep ’24

Are you able to reproduce the issue on iOS & iPadOS 18.1 Beta 4?

1

Answer 2

sunwukongTH OP

Sep ’24

@DTS Engineer Although I have tested on iOS 18.1 beta 4, I am still encountering this issue. Could you kindly advise on what steps I should take next?

0

Answer 3

bilal-springermedia OP

Sep ’24

Accepted Answer

I've checked iOS 18.1 beta as well. It's problem there as well.

@sunwukongTH

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
    }
}

1

Answer 4

MolinS OP

Sep ’24

DecorationItemView without blocking gestures: override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {

    let view = super.hitTest(point, with: event)

    if view == self {
        return nil
    }
    return view
}

And change layer.zPosition when willDisplaySupplementaryView:

func collectionView(_ collectionView: UICollectionView, willDisplaySupplementaryView view: UICollectionReusableView, forElementKind elementKind: String, at indexPath: IndexPath) {
       //....
            if #available(iOS 18.0, *) {
                view.layer.zPosition = -5
            }
    }

2